extrapolate loader

src/app/loading.tsx

@@ -1,25 +1,25 @@
 import { cn } from "@/lib/utils"
 import { ComponentProps } from "react"
 export const LoadingSpinner = ({ className }: ComponentProps<"svg">) => {
-  return <svg
+  return <div className="size-full flex justify-center items-center z">
-    xmlns="http://www.w3.org/2000/svg"
+    <svg
-    width="100"
+      xmlns="http://www.w3.org/2000/svg"
-    height="100"
+      width="100"
-    viewBox="0 0 24 24"
+      height="100"
-    fill="none"
+      viewBox="0 0 24 24"
-    stroke="currentColor"
+      fill="none"
-    strokeWidth="2"
+      stroke="currentColor"
-    strokeLinecap="round"
+      strokeWidth="2"
-    strokeLinejoin="round"
+      strokeLinecap="round"
-    className={cn("animate-spin", className)}
+      strokeLinejoin="round"
-  >
+      className={cn("animate-spin", className)}
-    <path d="M21 12a9 9 0 1 1-6.219-8.56" />
+    >
-  </svg>
+      <path d="M21 12a9 9 0 1 1-6.219-8.56" />
+    </svg>
+  </div>
 }
 export default function Loading() {
   return (
-    <><div className="size-full flex justify-center items-center z">
+    <LoadingSpinner />
-      <LoadingSpinner />
-    </div></>
   )
 }

src/app/story/loading.tsx

@@ -0,0 +1,5 @@
+import { LoadingSpinner } from "app/loading";
+
+export default function Loading() {
+  return <LoadingSpinner />
+}