feat(button): use gradient loading spinner for loading state

0xStation · Dec 18, 2023 · 7ec58f2 · 7ec58f2
1 parent 9a8d5cf
commit 7ec58f2
Showing 1 changed file with 33 additions and 36 deletions.
diff --git a/packages/components/src/button/index.tsx b/packages/components/src/button/index.tsx
@@ -30,10 +30,10 @@ const buttonVariants = cva(
 export const Button = React.forwardRef<
   HTMLButtonElement,
   React.ComponentPropsWithoutRef<'button'> &
-    VariantProps<typeof buttonVariants> & {
-      children: React.ReactNode
-      loading?: boolean
-    }
+  VariantProps<typeof buttonVariants> & {
+    children: React.ReactNode
+    loading?: boolean
+  }
 >(({ children, className, variant = 'primary', size = 'md', fullWidth = false, loading, ...props }, ref) => {
   const buttonRef = React.useRef<HTMLButtonElement>(null)
 
@@ -75,48 +75,45 @@ const spinnerVariants = cva('animate-spin', {
 })
 
 export const Spinner = ({ variant = 'primary', size = 'md' }: VariantProps<typeof spinnerVariants>) => (
+  // this is custom made from this sample CodePen: https://codepen.io/mtvv/pen/JjdoPRr
+  // and this tutorial: https://www.benmvp.com/blog/how-to-create-circle-svg-gradient-loading-spinner/
+  // it works by making two semi-circle arcs and applying 0->50 gradient on one and 50-100 gradient
+  // on the other to make it look like one continuous 0->100 gradient
   <svg
     className={cn(
+      "animate-spin",
       spinnerVariants({
         variant,
         size,
       }),
     )}
+    width="24"
+    height="24"
     viewBox="0 0 24 24"
+    color="#687385"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
   >
-    <path d="M12 4.75V6.25" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
-    <path
-      d="M17.1266 6.87347L16.0659 7.93413"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path d="M19.25 12L17.75 12" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
-    <path
-      d="M17.1266 17.1265L16.0659 16.0659"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path d="M12 17.75V19.25" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
-    <path
-      d="M7.9342 16.0659L6.87354 17.1265"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path d="M6.25 12L4.75 12" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
-    <path
-      d="M7.9342 7.93413L6.87354 6.87347"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
+    <defs>
+      <linearGradient id="spinner-firstHalf">
+        <stop offset="0%" stopOpacity="1" stopColor="currentColor" />
+        <stop offset="100%" stopOpacity="0.4" stopColor="currentColor" />
+      </linearGradient>
+      <linearGradient id="spinner-secondHalf">
+        <stop offset="0%" stopOpacity="0" stopColor="currentColor" />
+        <stop offset="100%" stopOpacity="0.5" stopColor="currentColor" />
+      </linearGradient>
+    </defs>
+
+    <g fill="currentColor" transform="translate(4,4)">
+      <path
+        fill="url(#spinner-firstHalf)"
+        d="M 0 8 A 8 8 0 0 0 16 8 L 13 8 A 5 5 0 0 1 3 8 L 0 8 Z"
+      />
+      <path
+        fill="url(#spinner-secondHalf)"
+        d="M 16 8 A 8 8 0 0 0 0 8 L 3 8 A 5 5 0 0 1 13 8 L 16 8 Z"
+      />
+    </g>
   </svg>
 )