feat(spinner): ✨ add linear gradient to spinner component

Author: Karthik-B-06

src/components/spinner/Spinner.tsx

@@ -1,16 +1,22 @@
-import React, { forwardRef, useEffect } from "react";
-import { ViewProps } from "react-native";
-import {
+import React, { forwardRef } from "react";
+import { ColorValue } from "react-native";
+import Animated, {
+  cancelAnimation,
   Easing,
+  interpolate,
+  useAnimatedProps,
   useAnimatedStyle,
   useSharedValue,
   withRepeat,
   withTiming,
 } from "react-native-reanimated";
+import Svg, { Circle, Defs, G, LinearGradient, Stop } from "react-native-svg";
 
-import { AnimatedBox } from "../../primitives";
+import { AnimatedBox, BoxProps } from "../../primitives";
 import { useTheme } from "../../theme";
-import { createComponent, cx, styleAdapter } from "../../utils";
+import { createComponent, styleAdapter } from "../../utils";
+
+const AnimatedCircle = Animated.createAnimatedComponent(Circle);
 
 export type SpinnerSizes = "xs" | "sm" | "md" | "lg" | "xl";
 export type SpinnerTheme =
@@ -20,7 +26,7 @@ export type SpinnerTheme =
   | "success"
   | "danger";
 
-export interface SpinnerLibProps {
+export interface SpinnerProps extends BoxProps {
   /**
    * How large should the spinner be?
    * @default md
@@ -38,53 +44,130 @@ export interface SpinnerLibProps {
   themeColor: SpinnerTheme;
 }
 
-export interface SpinnerProps extends SpinnerLibProps, ViewProps {}
-
 const RNSpinner: React.FC<Partial<SpinnerProps>> = forwardRef<
   typeof AnimatedBox,
   Partial<SpinnerProps>
->(({ size = "md", track = "transparent", themeColor = "base", style }, ref) => {
-  const spinnerLoopAnimation = useSharedValue(0);
-  useEffect(() => {
-    spinnerLoopAnimation.value = withRepeat(
-      withTiming(360, {
-        duration: 1000,
-        easing: Easing.linear,
-      }),
-      -1,
-      false,
-    );
-  }, [spinnerLoopAnimation]);
-  const spinnerLoadingStyle = useAnimatedStyle(() => {
+>((props, ref) => {
+  const tailwind = useTheme();
+  const spinnerTheme = useTheme("spinner");
+
+  const {
+    size = "md",
+    track = "transparent",
+    themeColor = "base",
+    style,
+  } = props;
+
+  // Circle parameters
+  const radius = 44;
+
+  const progress = useSharedValue(0);
+  const rotate = useSharedValue(0);
+
+  const animatedSvgStyle = useAnimatedStyle(() => {
+    const rotateValue = interpolate(rotate.value, [0, 1], [0, 360]);
     return {
       transform: [
         {
-          rotate: `${spinnerLoopAnimation.value}deg`,
+          rotate: `${rotateValue}deg`,
         },
       ],
     };
   });
 
-  const tailwind = useTheme();
-  const spinnerTheme = useTheme("spinner");
+  const indeterminateAnimatedCircularProgress = useAnimatedProps(() => {
+    return {
+      strokeDashoffset: interpolate(
+        progress.value,
+        [0, 0.5, 1],
+        [0, -276, -(276 * 2)],
+      ),
+    };
+  });
+
+  React.useEffect(() => {
+    progress.value = withRepeat(
+      withTiming(1, {
+        duration: 1500,
+        easing: Easing.linear,
+      }),
+      -1,
+      false,
+      finished => {
+        if (!finished) {
+          progress.value = 0;
+        }
+      },
+    );
+    rotate.value = withRepeat(
+      withTiming(1, {
+        duration: 1000,
+        easing: Easing.bezier(0.4, 0, 0.2, 1),
+      }),
+      -1,
+      false,
+      finished => {
+        if (!finished) {
+          rotate.value = 0;
+        }
+      },
+    );
+    return () => {
+      cancelAnimation(progress);
+      cancelAnimation(rotate);
+    };
+  }, [progress, rotate]);
   return (
     <AnimatedBox
       ref={ref}
       style={[
-        tailwind.style(
-          cx(
-            spinnerTheme.base,
-            spinnerTheme.themeColor[themeColor],
-            track === "visible"
-              ? spinnerTheme.track[track]?.[themeColor]
-              : spinnerTheme.track.transparent,
-            spinnerTheme.size[size],
-          ),
-        ),
-        styleAdapter(style), // Accepts View Style to overide the Default Spinner Style
-        spinnerLoadingStyle,
+        tailwind.style(spinnerTheme.size[size]),
+        styleAdapter(style),
+        animatedSvgStyle,
       ]}
-    />
+    >
+      <Svg width="100%" height="100%" viewBox={"0 0 100 100"}>
+        <Defs>
+          <LinearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="100%">
+            <Stop
+              offset="0%"
+              stopColor={tailwind.getColor(spinnerTheme.themeColor[themeColor])}
+            />
+            <Stop
+              offset="100%"
+              stopColor={tailwind.getColor(spinnerTheme.themeColor[themeColor])}
+              stopOpacity="0"
+            />
+          </LinearGradient>
+        </Defs>
+        <G rotation={"-90"} origin="50, 50">
+          <Circle
+            stroke={
+              tailwind.getColor(
+                track === "transparent"
+                  ? spinnerTheme.track[track]
+                  : spinnerTheme.track[track][themeColor],
+              ) as ColorValue
+            }
+            strokeWidth={10}
+            fill="transparent"
+            r={radius}
+            cx={50}
+            cy={50}
+          />
+          <AnimatedCircle
+            stroke="url(#gradient)"
+            strokeWidth={10}
+            r={radius}
+            cx={50}
+            cy={50}
+            strokeLinecap="round"
+            strokeDasharray="276 276"
+            animatedProps={indeterminateAnimatedCircularProgress}
+          />
+        </G>
+      </Svg>
+    </AnimatedBox>
   );
 });
 

src/theme/defaultTheme/spinner.ts

@@ -1,13 +1,13 @@
 export const spinner = {
   base: "border-solid rounded-full border-[1.5px]",
   track: {
-    transparent: "border-b-transparent border-l-transparent",
+    transparent: "border-transparent",
     visible: {
-      base: "border-b-gray-400 border-l-gray-400",
-      primary: "border-b-blue-400 border-l-blue-400",
-      secondary: "border-b-violet-400 border-l-violet-400",
-      success: "border-b-green-400 border-l-green-400",
-      danger: "border-b-red-400 border-l-red-400",
+      base: "border-gray-400",
+      primary: "border-blue-400",
+      secondary: "border-violet-400",
+      success: "border-green-400",
+      danger: "border-red-400",
     },
   },
   themeColor: {