refactor: integrate useMinimumLoading hook for enhanced loading state management across multiple pages

components/useMinimumLoading.ts

@@ -0,0 +1,34 @@
+'use client'
+
+import { useState, useEffect, useRef } from 'react'
+
+/**
+ * Prevents skeleton flicker on fast loads by keeping it visible
+ * for at least `minMs` once it appears.
+ *
+ * @param loading - The raw loading state from data fetching
+ * @param minMs - Minimum milliseconds the skeleton stays visible (default 300)
+ * @returns Whether the skeleton should be shown
+ */
+export function useMinimumLoading(loading: boolean, minMs = 300): boolean {
+  const [show, setShow] = useState(loading)
+  const startRef = useRef<number>(loading ? Date.now() : 0)
+
+  useEffect(() => {
+    if (loading) {
+      startRef.current = Date.now()
+      setShow(true)
+    } else {
+      const elapsed = Date.now() - startRef.current
+      const remaining = minMs - elapsed
+      if (remaining > 0) {
+        const timer = setTimeout(() => setShow(false), remaining)
+        return () => clearTimeout(timer)
+      } else {
+        setShow(false)
+      }
+    }
+  }, [loading, minMs])
+
+  return show
+}