From 5af050d198e6dcbc3eb9c76a33735694e54c9fd8 Mon Sep 17 00:00:00 2001
From: Oleg Isonen <oleg008@gmail.com>
Date: Wed, 27 Jul 2022 02:14:31 +0200
Subject: [PATCH] fix sync status icon jumping around in width when in loading
 state

---
 .../designer/features/topbar/sync-status.tsx  | 49 ++++++++++---------
 1 file changed, 26 insertions(+), 23 deletions(-)

diff --git a/apps/designer/app/designer/features/topbar/sync-status.tsx b/apps/designer/app/designer/features/topbar/sync-status.tsx
index 121d01ce4c..d96602437d 100644
--- a/apps/designer/app/designer/features/topbar/sync-status.tsx
+++ b/apps/designer/app/designer/features/topbar/sync-status.tsx
@@ -1,24 +1,38 @@
-import { Flex, keyframes, AccessibleIcon } from "~/shared/design-system";
+import {
+  Flex,
+  keyframes,
+  AccessibleIcon,
+  styled,
+  Box,
+} from "~/shared/design-system";
 import { CheckIcon, DotsHorizontalIcon } from "~/shared/icons";
 import { useSyncStatus } from "../../shared/nano-states";
 
 const iconSize = 15;
 
+const StyledCheckIcon = styled(CheckIcon, {
+  width: iconSize,
+  height: iconSize,
+  background: "$green9",
+  borderRadius: "$radii$round",
+});
+
 const ellipsisKeyframes = keyframes({
   to: { width: iconSize },
 });
 
 const AnimatedDotsIcon = () => {
   return (
-    <Flex
-      direction="column"
-      css={{
-        animation: `${ellipsisKeyframes} steps(4,end) 900ms infinite`,
-        width: 0,
-        overflow: "hidden",
-      }}
-    >
-      <DotsHorizontalIcon width="12" height="12" />
+    <Flex direction="column" css={{ width: iconSize }}>
+      <Box
+        css={{
+          animation: `${ellipsisKeyframes} steps(4,end) 900ms infinite`,
+          width: 0,
+          overflow: "hidden",
+        }}
+      >
+        <DotsHorizontalIcon width="12" height="12" />
+      </Box>
     </Flex>
   );
 };
@@ -26,20 +40,9 @@ const AnimatedDotsIcon = () => {
 export const SyncStatus = () => {
   const [status] = useSyncStatus();
   return (
-    <Flex
-      align="center"
-      justify="center"
-      css={{
-        "& > svg": {
-          width: iconSize,
-          height: iconSize,
-          background: "$green9",
-          borderRadius: "$radii$round",
-        },
-      }}
-    >
+    <Flex align="center" justify="center">
       <AccessibleIcon label={`Sync status: ${status}`}>
-        {status === "syncing" ? <AnimatedDotsIcon /> : <CheckIcon />}
+        {status === "syncing" ? <AnimatedDotsIcon /> : <StyledCheckIcon />}
       </AccessibleIcon>
     </Flex>
   );