Add useSpinDelay hook

Author: LauraBeatris

packages/ui/src/components/ConfigureSSO/steps/TestConfigurationStep.tsx

@@ -32,7 +32,7 @@ import { useCardState } from '@/elements/contexts';
 import { Drawer } from '@/elements/Drawer';
 import { IconButton } from '@/elements/IconButton';
 import { Pagination } from '@/elements/Pagination';
-import { useClipboard } from '@/hooks';
+import { useClipboard, useSpinDelay } from '@/hooks';
 import { Check, Copy, LinkIcon, RotateLeftRight } from '@/icons';
 import { common, mqu } from '@/styledSystem';
 import { handleError } from '@/utils/errorHandler';
@@ -65,6 +65,7 @@ export const TestConfigurationStep = (): JSX.Element => {
   });
 
   const isRefreshingTestRuns = areTestRunsFetching && !areTestRunsLoading;
+  const showRefreshLogsSpinner = useSpinDelay(isRefreshingTestRuns);
   const pageCount = totalCount ? Math.ceil(totalCount / TEST_RUNS_PAGE_SIZE) : 0;
 
   const handleTestRunCreated = () => {
@@ -114,10 +115,10 @@ export const TestConfigurationStep = (): JSX.Element => {
                 colorScheme='secondary'
                 size='xs'
                 onClick={() => void revalidateTestRuns()}
-                isDisabled={isRefreshingTestRuns}
+                isDisabled={showRefreshLogsSpinner}
                 sx={t => ({ gap: t.space.$1x5 })}
               >
-                {isRefreshingTestRuns ? (
+                {showRefreshLogsSpinner ? (
                   <Spinner
                     elementDescriptor={descriptors.spinner}
                     size='xs'

packages/ui/src/hooks/index.ts

@@ -16,4 +16,5 @@ export * from './usePrefersReducedMotion';
 export * from './useSafeState';
 export * from './useScrollLock';
 export * from './useSearchInput';
+export * from './useSpinDelay';
 export * from './useTotalEnabledAuthMethods';

packages/ui/src/hooks/useSpinDelay.ts

@@ -0,0 +1,66 @@
+import { useEffect, useRef } from 'react';
+
+import { useSafeState } from './useSafeState';
+
+type UseSpinDelayOptions = {
+  /**
+   * The amount of time (in ms) to wait before reflecting `value === true`. If `value` flips back
+   * to `false` before this elapses, the flag is never set to `true` (the spinner is skipped).
+   *
+   * @default 0
+   */
+  delay?: number;
+  /**
+   * Once the flag becomes `true`, it stays `true` for at least this long (in ms) even if the
+   * underlying `value` returns to `false` earlier. Prevents the spinner from flickering on fast
+   * operations.
+   *
+   * @default 425
+   */
+  minDuration?: number;
+};
+
+const DEFAULT_DELAY = 0;
+// 425ms is the default used by the dashboard (`apps/dashboard/app/hooks/use-pending-hooks.ts`),
+// chosen by trial-and-error as the threshold above which a spinner feels intentional rather
+// than a flicker.
+const DEFAULT_MIN_DURATION = 425;
+
+/**
+ * Smooths a transient boolean flag (typically a loading/fetching state) so the consumer never
+ * shows a spinner that flickers on and off within a single frame.
+ *
+ * @example
+ *   const isFetching = useSomeQuery();
+ *   const showSpinner = useSpinDelay(isFetching, { delay: 0, minDuration: 425 });
+ *   return showSpinner ? <Spinner /> : <Icon />;
+ */
+export function useSpinDelay(
+  value: boolean,
+  { delay = DEFAULT_DELAY, minDuration = DEFAULT_MIN_DURATION }: UseSpinDelayOptions = {},
+): boolean {
+  const [displayed, setDisplayed] = useSafeState(false);
+  const shownAtRef = useRef<number | null>(null);
+
+  useEffect(() => {
+    if (value && !displayed) {
+      const timeout = setTimeout(() => {
+        shownAtRef.current = Date.now();
+        setDisplayed(true);
+      }, delay);
+      return () => clearTimeout(timeout);
+    }
+
+    if (!value && displayed) {
+      const elapsed = shownAtRef.current != null ? Date.now() - shownAtRef.current : minDuration;
+      const remaining = Math.max(0, minDuration - elapsed);
+      const timeout = setTimeout(() => {
+        shownAtRef.current = null;
+        setDisplayed(false);
+      }, remaining);
+      return () => clearTimeout(timeout);
+    }
+  }, [value, displayed, delay, minDuration, setDisplayed]);
+
+  return displayed;
+}