Prevent layout recalculations in some animations

ts/components/CallingToastManager.tsx

@@ -115,33 +115,33 @@ export function CallingToastManager(props: PropsType): JSX.Element {
     toast = screenSharingToast;
   }
 
-  const [toastMessage, setToastMessage] = useState('');
+  const [isVisible, setIsVisible] = useState(false);
   const timeoutRef = useRef<NodeJS.Timeout | null>(null);
 
   const dismissToast = useCallback(() => {
     if (timeoutRef) {
-      setToastMessage('');
+      setIsVisible(false);
     }
-  }, [setToastMessage, timeoutRef]);
+  }, [setIsVisible, timeoutRef]);
 
   useEffect(() => {
-    if (toast) {
-      if (toast.type === 'dismissable') {
-        clearTimeoutIfNecessary(timeoutRef.current);
-        timeoutRef.current = setTimeout(dismissToast, DEFAULT_LIFETIME);
-      }
+    setIsVisible(toast !== undefined);
+  }, [toast]);
 
-      setToastMessage(toast.message);
+  useEffect(() => {
+    if (toast?.type === 'dismissable') {
+      clearTimeoutIfNecessary(timeoutRef.current);
+      timeoutRef.current = setTimeout(dismissToast, DEFAULT_LIFETIME);
     }
 
     return () => {
       clearTimeoutIfNecessary(timeoutRef.current);
     };
-  }, [dismissToast, setToastMessage, timeoutRef, toast]);
+  }, [dismissToast, setIsVisible, timeoutRef, toast]);
 
   return (
-    <CallingToast isVisible={Boolean(toastMessage)} onClick={dismissToast}>
-      {toastMessage}
+    <CallingToast isVisible={isVisible} onClick={dismissToast}>
+      {toast?.message}
     </CallingToast>
   );
 }

ts/components/DialogUpdate.stories.tsx

@@ -7,6 +7,7 @@ import { action } from '@storybook/addon-actions';
 import { DialogUpdate } from './DialogUpdate';
 import { DialogType } from '../types/Dialogs';
 import { WidthBreakpoint } from './_util';
+import { SECOND } from '../util/durations';
 import { FakeLeftPaneContainer } from '../test-both/helpers/FakeLeftPaneContainer';
 
 import { setupI18n } from '../util/setupI18n';
@@ -110,10 +111,29 @@ FullDownloadReadyWide.story = {
 };
 
 export function DownloadingWide(): JSX.Element {
+  const [downloadedSize, setDownloadedSize] = React.useState(0);
+
+  const { downloadSize } = defaultProps;
+
+  React.useEffect(() => {
+    const interval = setInterval(() => {
+      setDownloadedSize(x => {
+        const newValue = x + 0.25 * downloadSize;
+        if (newValue > downloadSize) {
+          return 0;
+        }
+        return newValue;
+      });
+    }, SECOND);
+
+    return () => clearInterval(interval);
+  }, [downloadSize]);
+
   return (
     <FakeLeftPaneContainer containerWidthBreakpoint={WidthBreakpoint.Wide}>
       <DialogUpdate
         {...defaultProps}
+        downloadedSize={downloadedSize}
         containerWidthBreakpoint={WidthBreakpoint.Wide}
         currentVersion="5.24.0"
         dialogType={DialogType.Downloading}

ts/components/DialogUpdate.tsx

@@ -204,7 +204,7 @@ export function DialogUpdate({
         <div className="LeftPaneDialog__progress--container">
           <div
             className="LeftPaneDialog__progress--bar"
-            style={{ width: `${width}%` }}
+            style={{ transform: `translateX(${width - 100}%)` }}
           />
         </div>
       </LeftPaneDialog>

ts/components/GroupCallRemoteParticipant.tsx

@@ -235,8 +235,7 @@ export const GroupCallRemoteParticipant: React.FC<PropsType> = React.memo(
 
       if ('top' in props) {
         containerStyles.position = 'absolute';
-        containerStyles.top = props.top;
-        containerStyles.left = props.left;
+        containerStyles.transform = `translate(${props.left}px, ${props.top}px)`;
       }
     }