use prediction in event progress

apps/client/src/features/rundown/event-block/composite/EventBlockProgressBar.module.scss

@@ -3,7 +3,7 @@
   width: 0;
   border-radius: 1px 0 0 1px;
 
-  transition: 1s linear;
+  transition: 200ms linear;
   transition-property: width;
   background-color: $gray-200;
 }

apps/client/src/features/rundown/event-block/composite/EventBlockProgressBar.tsx

@@ -1,12 +1,13 @@
+import { useClientTimePrediction } from '../../../../common/hooks/useClientTimePrediction';
 import { useTimer } from '../../../../common/hooks/useSocket';
 import { getProgress } from '../../../../common/utils/getProgress';
 
 import style from './EventBlockProgressBar.module.scss';
 
 export default function EventBlockProgressBar() {
-  const timer = useTimer();
-
-  const progress = getProgress(timer.current, timer.duration);
+  const { duration } = useTimer();
+  const clientCurrent = useClientTimePrediction();
+  const progress = getProgress(clientCurrent, duration);
 
   return <div className={style.progressBar} style={{ width: `${progress}%` }} />;
 }