Performance: Fix slow color picker (#1969)

* Fix Performance issue when picking color

Signed-off-by: Moulik Aggarwal <qwertymoulik@gmail.com>

* Fix any type in hook

Signed-off-by: Moulik Aggarwal <qwertymoulik@gmail.com>

* Theme sidebar handleChange

Signed-off-by: Moulik Aggarwal <qwertymoulik@gmail.com>

---------

Signed-off-by: Moulik Aggarwal <qwertymoulik@gmail.com>

Author: aggmoulik

apps/status-page/src/components/themes/theme-sidebar.tsx

@@ -47,6 +47,7 @@ import {
 } from "@openstatus/ui/components/ui/tooltip";
 import { useCopyToClipboard } from "@openstatus/ui/hooks/use-copy-to-clipboard";
 import { useDebounce } from "@openstatus/ui/hooks/use-debounce";
+import { useDebounceCallback } from "@openstatus/ui/hooks/use-debounce-callback";
 import { cn } from "@openstatus/ui/lib/utils";
 import {
   Check,
@@ -344,6 +345,17 @@ function ThemeValueSelector(props: {
 }) {
   const { resolvedTheme } = useTheme();
 
+  const handleChange = useDebounceCallback((value: string) => {
+    const mode = resolvedTheme as "light" | "dark";
+    props.setTheme({
+      ...props.theme,
+      [mode]: {
+        ...props.theme[mode],
+        [props.id]: value,
+      },
+    });
+  }, 100);
+
   if (!props.isMounted || !resolvedTheme)
     return <Skeleton className="ml-auto size-4 border border-foreground/70" />;
 
@@ -362,15 +374,7 @@ function ThemeValueSelector(props: {
           name={props.id}
           value={value}
           className="sr-only"
-          onChange={(e) =>
-            props.setTheme({
-              ...props.theme,
-              [resolvedTheme as "light" | "dark"]: {
-                ...props.theme[resolvedTheme as "light" | "dark"],
-                [props.id]: e.target.value,
-              },
-            })
-          }
+          onChange={(e) => handleChange(e.target.value)}
         />
       </label>
     );

packages/ui/src/hooks/use-debounce-callback.ts

@@ -0,0 +1,29 @@
+import { useCallback, useEffect, useRef } from "react";
+
+export function useDebounceCallback<Args extends unknown[]>(
+  callback: (...args: Args) => void,
+  delay = 500,
+) {
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const debounced = useCallback(
+    (...args: Args) => {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+      }
+
+      timerRef.current = setTimeout(() => {
+        callback(...args);
+      }, delay);
+    },
+    [callback, delay],
+  );
+
+  useEffect(() => {
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+    };
+  }, []);
+
+  return debounced;
+}