optimized the CircularProgress Bar Code

Author: dhavalveera

packages/ui/src/components/Progress/ProgressCircular.tsx

@@ -1,5 +1,5 @@
 import type { ComponentProps, FC } from "react";
-import { useId } from "react";
+import { useId, useMemo } from "react";
 import { twMerge } from "tailwind-merge";
 import { mergeDeep } from "../../helpers/merge-deep";
 import { getTheme } from "../../theme-store";
@@ -33,11 +33,12 @@ export interface CircularProgressProps extends ComponentProps<"div"> {
   progress: number;
   textLabel?: string;
   theme?: DeepPartial<FlowbiteCircularProgressTheme>;
+  progressColor?: keyof CircularProgressColor;
 }
 
 export const CircularProgress: FC<CircularProgressProps> = ({
   className,
-  color = "cyan",
+  progressColor = "cyan",
   labelText = false,
   progress,
   textLabel = "65%",
@@ -47,11 +48,14 @@ export const CircularProgress: FC<CircularProgressProps> = ({
   const id = useId();
   const theme = mergeDeep(getTheme().progress.circular, customTheme);
 
-  // Calculate the circumference of the Circle
-  const circumference = 2 * Math.PI * 16;
+  // Memoize calculations for the circumference and stroke offset to avoid recalculating on each render
+  const { offset } = useMemo(() => {
+    const circumference = 2 * Math.PI * 16; // Fixed radius of 16
 
-  // Calculate the stroke-dashoffset
-  const offset = circumference * (1 - progress / 100);
+    const offset = circumference * (1 - progress / 100); // Stroke dash offset based on progress
+
+    return { offset };
+  }, [progress]);
 
   return (
     <div id={id} aria-valuenow={progress} role="progressbar" {...props}>
@@ -64,7 +68,7 @@ export const CircularProgress: FC<CircularProgressProps> = ({
             cy="18"
             r="16"
             fill="none"
-            className={theme.color.barColor[color]}
+            className={theme.color.barColor[progressColor]}
             strokeWidth="2"
             strokeDasharray="100"
             strokeDashoffset={offset}
@@ -76,7 +80,7 @@ export const CircularProgress: FC<CircularProgressProps> = ({
           <div className={theme.label.base}>
             <span
               data-testid="flowbite-circular-progress-label"
-              className={twMerge(theme.label.text, theme.label.textColor[color])}
+              className={twMerge(theme.label.text, theme.label.textColor[progressColor])}
             >
               {textLabel}
             </span>