CSS modules ➡️ Stitches 🧵 (#799)

components/Loading/Loading.tsx

@@ -1,7 +1,26 @@
 import { memo } from "react";
-import classNames from "classnames";
+import { styled, keyframes } from "../../lib/styles/stitches.config";
 
-import styles from "./Loading.module.css";
+const pulse = keyframes({
+  "0%, 80%, 100%": {
+    transform: "scale(0)",
+  },
+  "40%": {
+    transform: "scale(0.6)",
+  },
+});
+
+const Wrapper = styled("div", {
+  display: "inline-block",
+  textAlign: "center",
+});
+
+const Box = styled("div", {
+  display: "inline-block",
+  height: "100%",
+  animation: `${pulse} 1.5s infinite ease-in-out both`,
+  backgroundColor: "$mediumLight",
+});
 
 export type LoadingProps = {
   width: number; // of entire container, in pixels
@@ -19,10 +38,9 @@ const Loading = ({ width, boxes = 3, timing = 0.1, className }: LoadingProps) =>
     // width of each box correlates with number of boxes (with a little padding)
     // each individual box's animation has a staggered start in corresponding order
     divs.push(
-      <div
+      <Box
         key={i}
-        className={styles.box}
-        style={{
+        css={{
           width: `${width / (boxes + 1)}px`,
           animationDelay: `${i * timing}s`,
         }}
@@ -31,15 +49,15 @@ const Loading = ({ width, boxes = 3, timing = 0.1, className }: LoadingProps) =>
   }
 
   return (
-    <div
-      className={classNames(styles.wrapper, className)}
+    <Wrapper
+      className={className}
       style={{
         width: `${width}px`,
         height: `${width / 2}px`,
       }}
     >
       {divs}
-    </div>
+    </Wrapper>
   );
 };