refactor(ScriptPage): replace Spinner with Loader2 component

src/app/scripts/_components/ScriptPage.tsx

@@ -2,7 +2,6 @@
 
 import ScriptBrowser from "@/app/scripts/_components/ScriptBrowser";
 import ScriptItem from "@/app/scripts/_components/ScriptItem";
-import { Spinner } from "@/components/ui/spinner";
 import { Category } from "@/lib/types";
 import { Loader2 } from "lucide-react";
 import { useEffect, useState } from "react";
@@ -57,7 +56,7 @@ export default function ScriptPage() {
     return (
       <div className="flex h-screen w-full flex-col items-center justify-center gap-5 bg-background px-4 md:px-6">
         <div className="space-y-2 text-center">
-          <Spinner size="lg" className="bg-black dark:bg-white" />
+          <Loader2 className="h-10 w-10 animate-spin" />
         </div>
       </div>
     );

src/components/ui/spinner.tsx

@@ -1,67 +0,0 @@
-import { cn } from "@/lib/utils";
-import { Slot } from "@radix-ui/react-slot";
-import { cva, type VariantProps } from "class-variance-authority";
-import * as React from "react";
-
-const spinnerVariants = cva("relative block opacity-[0.65]", {
-  variants: {
-    size: {
-      sm: "w-4 h-4",
-      md: "w-6 h-6",
-      lg: "w-8 h-8",
-    },
-  },
-  defaultVariants: {
-    size: "sm",
-  },
-});
-
-export interface SpinnerProps
-  extends React.HTMLAttributes<HTMLSpanElement>,
-    VariantProps<typeof spinnerVariants> {
-  loading?: boolean;
-  asChild?: boolean;
-}
-
-const Spinner = React.forwardRef<HTMLSpanElement, SpinnerProps>(
-  ({ className, size, loading = true, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : "span";
-
-    const [bgColorClass, filteredClassName] = React.useMemo(() => {
-      const bgClass = className?.match(/(?:dark:bg-|bg-)S+/g) || [];
-      const filteredClasses = className
-        ?.replace(/(?:dark:bg-|bg-)S+/g, "")
-        .trim();
-      return [bgClass, filteredClasses];
-    }, [className]);
-
-    if (!loading) return null;
-
-    return (
-      <Comp
-        className={cn(spinnerVariants({ size, className: filteredClassName }))}
-        ref={ref}
-        {...props}
-      >
-        {Array.from({ length: 8 }).map((_, i) => (
-          <span
-            key={i}
-            className="absolute top-0 left-1/2 w-[12.5%] h-full animate-spinner-leaf-fade"
-            style={{
-              transform: `rotate(${i * 45}deg)`,
-              animationDelay: `${-(7 - i) * 100}ms`,
-            }}
-          >
-            <span
-              className={cn("block w-full h-[30%] rounded-full", bgColorClass)}
-            ></span>
-          </span>
-        ))}
-      </Comp>
-    );
-  },
-);
-
-Spinner.displayName = "Spinner";
-
-export { Spinner };

src/styles/globals.css

@@ -79,4 +79,4 @@
 .glass {
   backdrop-filter: blur(15px) saturate(100%);
   -webkit-backdrop-filter: blur(15px) saturate(100%);
-}
+}

tailwind.config.ts

@@ -126,17 +126,12 @@ const config = {
             transform: "translateY(-50%)",
           },
         },
-        "spinner-leaf-fade": {
-          "0%, 100%": { opacity: "0" },
-          "50%": { opacity: "1" },
-        },
       },
       animation: {
         "accordion-down": "accordion-down 0.2s ease-out",
         "accordion-up": "accordion-up 0.2s ease-out",
         shine: "shine 8s ease-in-out infinite",
         gradient: "gradient 8s linear infinite",
-        "spinner-leaf-fade": "spinner-leaf-fade 800ms linear infinite",
       },
     },
   },