Migrate to app router (#2254)

components/Loading/Loading.tsx

@@ -1,32 +1,15 @@
-import { styled, theme, keyframes } from "../../lib/styles/stitches.config";
+import clsx from "clsx";
 import type { ComponentPropsWithoutRef } from "react";
 
-const Wrapper = styled("div", {
-  display: "inline-block",
-  textAlign: "center",
-});
+import styles from "./Loading.module.css";
 
-const Box = styled("div", {
-  display: "inline-block",
-  height: "100%",
-  animation: `${keyframes({
-    "0%, 80%, 100%": {
-      transform: "scale(0)",
-    },
-    "40%": {
-      transform: "scale(0.6)",
-    },
-  })} 1.5s infinite ease-in-out both`,
-  backgroundColor: theme.colors.mediumLight,
-});
-
-export type LoadingProps = ComponentPropsWithoutRef<typeof Wrapper> & {
+export type LoadingProps = ComponentPropsWithoutRef<"div"> & {
   width: number; // of entire container, in pixels
   boxes?: number; // total number of boxes (default: 3)
   timing?: number; // staggered timing between each box's pulse, in seconds (default: 0.1s)
 };
 
-const Loading = ({ width, boxes = 3, timing = 0.1, css, ...rest }: LoadingProps) => {
+const Loading = ({ width, boxes = 3, timing = 0.1, className, style, ...rest }: LoadingProps) => {
   // each box is just an empty div
   const divs = [];
 
@@ -35,12 +18,11 @@ const Loading = ({ width, boxes = 3, timing = 0.1, css, ...rest }: 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(
-      <Box
+      <div
         key={i}
-        css={{
-          width: `${width / (boxes + 1)}px`,
-        }}
+        className={styles.box}
         style={{
+          width: `${width / (boxes + 1)}px`,
           animationDelay: `${i * timing}s`,
         }}
       />
@@ -48,16 +30,17 @@ const Loading = ({ width, boxes = 3, timing = 0.1, css, ...rest }: LoadingProps)
   }
 
   return (
-    <Wrapper
-      css={{
+    <div
+      className={clsx(styles.loading, className)}
+      style={{
         width: `${width}px`,
         height: `${width / 2}px`,
-        ...css,
+        ...style,
       }}
       {...rest}
     >
       {divs}
-    </Wrapper>
+    </div>
   );
 };