fix: Refactor Shimmer styles for SWC compatibility

Codecademy · Aug 3, 2023 · ecca31f · ecca31f
1 parent 68f9e27
commit ecca31f
Showing 1 changed file with 18 additions and 17 deletions.
diff --git a/packages/gamut/src/Loading/Shimmer.tsx b/packages/gamut/src/Loading/Shimmer.tsx
@@ -1,26 +1,27 @@
-import { css } from '@codecademy/gamut-styles';
 import { keyframes } from '@emotion/react';
 import styled from '@emotion/styled';
 import * as React from 'react';
 
 import { Box, BoxProps } from '../Box';
 
-const shimmer = keyframes`
-0% { left: -500px; opacity: 0;  }
-50% { left: 0px; opacity: 1; }
-100% {  left: 500px; opacity: 0; }
-`;
+const slide = keyframes({
+  from: { left: -500 },
+  to: { left: 500 },
+});
+const fade = keyframes({
+  from: { opacity: 0 },
+  to: { opacity: 1 },
+});
 
-const ShimmerForeground = styled.div(
-  css({
-    position: 'absolute',
-    height: 1,
-    width: 500,
-    animation: `${shimmer} 2s infinite linear`,
-    background:
-      'linear-gradient(to right, rgba(0,0,0,0) 20%, rgb(0,0,0, 0.2) 50%, rgb(0,0,0, 0) 80%)',
-  })
-);
+const ShimmerForeground = styled(Box)`
+  animation: ${slide} 2s linear infinite, ${fade} 1s linear infinite alternate;
+  background: linear-gradient(
+    to right,
+    rgba(0, 0, 0, 0) 20%,
+    rgb(0, 0, 0, 0.2) 50%,
+    rgb(0, 0, 0, 0) 80%
+  );
+`;
 
 export const Shimmer: React.FC<BoxProps> = (props) => {
   return (
@@ -32,7 +33,7 @@ export const Shimmer: React.FC<BoxProps> = (props) => {
         opacity={0.5}
         overflow="hidden"
       >
-        <ShimmerForeground />
+        <ShimmerForeground height={1} width={500} position="absolute" />
       </Box>
     </Box>
   );