Makelore 2.0 initial clean snapshot

src/hooks/use-min-loading.ts

@@ -0,0 +1,45 @@
+import { useState, useRef, useEffect } from 'react';
+
+/**
+ * A hook that ensures a loading state remains true for at least a minimum duration (e.g., 1000ms),
+ * preventing flickering for very fast loading times.
+ *
+ * @param isLoading - The actual loading state from the data source
+ * @param minDurationMs - Minimum duration to show loading (default: 1000)
+ */
+export function useMinLoading(isLoading: boolean, minDurationMs: number = 500) {
+  const [showLoading, setShowLoading] = useState(isLoading);
+  const startTime = useRef<number>(0);
+
+  // Guarantee that the loading UI activates immediately without any asynchronous delay
+  if (isLoading && !showLoading) {
+    setShowLoading(true);
+  }
+
+  // Record the actual timestamp in an effect to respect React purity rules
+  useEffect(() => {
+    if (isLoading && startTime.current === 0) {
+      startTime.current = Date.now();
+    }
+  }, [isLoading]);
+
+  useEffect(() => {
+    let timeout: NodeJS.Timeout;
+
+    if (!isLoading && showLoading) {
+      const elapsed = startTime.current > 0 ? Date.now() - startTime.current : 0;
+      const remaining = Math.max(0, minDurationMs - elapsed);
+
+      timeout = setTimeout(() => {
+        setShowLoading(false);
+        startTime.current = 0;
+      }, remaining);
+    }
+
+    return () => {
+      if (timeout) clearTimeout(timeout);
+    };
+  }, [isLoading, showLoading, minDurationMs]);
+
+  return isLoading || showLoading;
+}