Updates

components/elements/Loading.tsx

@@ -5,32 +5,44 @@ type Props = DetailedHTMLProps<
     HTMLAttributes<HTMLDivElement>,
     HTMLDivElement
 > & {
-    size?: "small" | "normal" | "medium" | "large";
+    size?: "small" | "normal" | "medium" | "large" | "smaller";
+    svgClassName?: string;
 };
 
-export default function Loading({ size, ...props }: Props) {
+/**
+ * # Loading Component
+ * @className_wrapper twui-loading
+ */
+export default function Loading({ size, svgClassName, ...props }: Props) {
     const sizeClassName = (() => {
         switch (size) {
-            case "small":
-                return "w-2 h-2";
-            case "normal":
+            case "smaller":
                 return "w-4 h-4";
+            case "small":
+                return "w-5 h-5";
             case "normal":
                 return "w-6 h-6";
             case "large":
-                return "w-8 h-8";
+                return "w-7 h-7";
 
             default:
-                return "w-4 h-4";
+                return "w-6 h-6";
         }
     })();
+
     return (
-        <div role="status" {...props}>
+        <div
+            role="status"
+            {...props}
+            className={twMerge(`twui-loading`, props.className)}
+        >
             <svg
                 aria-hidden="true"
                 className={twMerge(
-                    "text-gray-200 animate-spin dark:text-gray-600 fill-blue-600",
-                    sizeClassName
+                    "text-gray animate-spin dark:text-gray-dark fill-primary",
+                    "dark:fill-white twui-loading",
+                    sizeClassName,
+                    svgClassName,
                 )}
                 viewBox="0 0 100 101"
                 fill="none"