Merge pull request #191 from webstudio-is/fix-sync-status-icon

Fix sync status icon jumping around in width when in loading state

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 "@webstudio-is/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>
   );