fix(ui): improve progress bar with local interpolation

Co-authored-by: Carlos Valente <34649812+cpvalente@users.noreply.github.com>

apps/client/src/common/components/progress-bar/ProgressBar.scss

@@ -14,6 +14,4 @@ $progress-bar-br: 3px;
 .progress-bar__indicator {
   height: $progress-bar-size;
   background-color: var(--timer-progress-override, $accent-color);
-  transition: 1s linear;
-  transition-property: width;
 }

apps/client/src/common/components/progress-bar/ProgressBar.tsx

@@ -1,6 +1,6 @@
 import { MaybeNumber } from 'ontime-types';
 
-import { getProgress } from '../../utils/getProgress';
+import { useAnimatedProgress } from '../../hooks/useAnimatedProgress';
 
 import './ProgressBar.scss';
 
@@ -12,7 +12,7 @@ interface ProgressBarProps {
 
 export default function ProgressBar(props: ProgressBarProps) {
   const { current, duration, className } = props;
-  const progress = getProgress(current, duration);
+  const progress = useAnimatedProgress(current, duration);
 
   return (
     <div className={`progress-bar__bg ${className}`}>