Refactor code structure for improved readability and maintainability

src/components/ui/loader.tsx

@@ -5,8 +5,6 @@ import React from "react"
 
 export interface LoaderProps {
   variant?:
-    | "circular"
-    | "classic"
     | "pulse"
     | "pulse-dot"
     | "dots"
@@ -22,78 +20,6 @@ export interface LoaderProps {
   className?: string
 }
 
-export function CircularLoader({
-  className,
-  size = "md",
-}: {
-  className?: string
-  size?: "sm" | "md" | "lg"
-}) {
-  const sizeClasses = {
-    sm: "size-4",
-    md: "size-5",
-    lg: "size-6",
-  }
-
-  return (
-    <div
-      className={cn(
-        "border-primary animate-spin rounded-full border-2 border-t-transparent",
-        sizeClasses[size],
-        className
-      )}
-    >
-      <span className="sr-only">Loading</span>
-    </div>
-  )
-}
-
-export function ClassicLoader({
-  className,
-  size = "md",
-}: {
-  className?: string
-  size?: "sm" | "md" | "lg"
-}) {
-  const sizeClasses = {
-    sm: "size-4",
-    md: "size-5",
-    lg: "size-6",
-  }
-
-  const barSizes = {
-    sm: { height: "6px", width: "1.5px" },
-    md: { height: "8px", width: "2px" },
-    lg: { height: "10px", width: "2.5px" },
-  }
-
-  return (
-    <div className={cn("relative", sizeClasses[size], className)}>
-      <div className="absolute h-full w-full">
-        {[...Array(12)].map((_, i) => (
-          <div
-            key={i}
-            className="bg-primary absolute animate-[spinner-fade_1.2s_linear_infinite] rounded-full"
-            style={{
-              top: "0",
-              left: "50%",
-              marginLeft:
-                size === "sm" ? "-0.75px" : size === "lg" ? "-1.25px" : "-1px",
-              transformOrigin: `${size === "sm" ? "0.75px" : size === "lg" ? "1.25px" : "1px"} ${size === "sm" ? "10px" : size === "lg" ? "14px" : "12px"}`,
-              transform: `rotate(${i * 30}deg)`,
-              opacity: 0,
-              animationDelay: `${i * 0.1}s`,
-              height: barSizes[size].height,
-              width: barSizes[size].width,
-            }}
-          />
-        ))}
-      </div>
-      <span className="sr-only">Loading</span>
-    </div>
-  )
-}
-
 export function PulseLoader({
   className,
   size = "md",
@@ -461,16 +387,12 @@ export function TextDotsLoader({
 }
 
 function Loader({
-  variant = "circular",
+  variant = "dots",
   size = "md",
   text,
   className,
 }: LoaderProps) {
   switch (variant) {
-    case "circular":
-      return <CircularLoader size={size} className={className} />
-    case "classic":
-      return <ClassicLoader size={size} className={className} />
     case "pulse":
       return <PulseLoader size={size} className={className} />
     case "pulse-dot":
@@ -492,7 +414,7 @@ function Loader({
     case "loading-dots":
       return <TextDotsLoader text={text} size={size} className={className} />
     default:
-      return <CircularLoader size={size} className={className} />
+      return <DotsLoader size={size} className={className} />
   }
 }
 

src/components/ui/sonner.tsx

@@ -2,7 +2,7 @@
 
 import { useTheme } from "next-themes"
 import { Toaster as Sonner, type ToasterProps } from "sonner"
-import { CircleCheckIcon, InfoIcon, TriangleAlertIcon, OctagonXIcon, Loader2Icon } from "lucide-react"
+import { CircleCheckIcon, InfoIcon, TriangleAlertIcon, OctagonXIcon } from "lucide-react"
 
 const Toaster = ({ ...props }: ToasterProps) => {
   const { theme = "system" } = useTheme()
@@ -25,7 +25,7 @@ const Toaster = ({ ...props }: ToasterProps) => {
           <OctagonXIcon className="size-4" />
         ),
         loading: (
-          <Loader2Icon className="size-4 animate-spin" />
+          <span className="block size-2.5 animate-pulse rounded-full bg-current" />
         ),
       }}
       style={