Feature/move list to client (#50)

apps/dashboard/src/hooks/useCursor.ts

@@ -1,6 +1,8 @@
 import { useTransition } from 'react';
 import { parseAsInteger, useQueryState } from 'nuqs';
 
+import { useDebounceValue } from './useDebounceValue';
+
 export function useCursor() {
   const [loading, startTransition] = useTransition();
   const [cursor, setCursor] = useQueryState(
@@ -15,3 +17,18 @@ export function useCursor() {
     loading,
   };
 }
+
+export type UseDebouncedCursor = ReturnType<typeof useDebouncedCursor>;
+
+export function useDebouncedCursor() {
+  const [cursor, setCursor] = useQueryState(
+    'cursor',
+    parseAsInteger.withDefault(0)
+  );
+  const debouncedCursor = useDebounceValue(cursor, 200);
+  return {
+    value: cursor,
+    set: setCursor,
+    debounced: debouncedCursor,
+  };
+}

apps/dashboard/src/hooks/useDebounceState.ts

@@ -7,7 +7,7 @@ interface DebouncedState<T> {
   set: React.Dispatch<React.SetStateAction<T>>;
 }
 
-export function useDebounceVal<T>(
+export function useDebounceState<T>(
   initialValue: T,
   delay = 500,
   options?: Parameters<typeof debounce>[2]

apps/dashboard/src/hooks/useDebounceValue.ts

@@ -0,0 +1,10 @@
+import { useEffect, useState } from 'react';
+
+export const useDebounceValue = <T>(value: T, delay: number): T => {
+  const [state, setState] = useState(value);
+  useEffect(() => {
+    const handler = setTimeout(() => setState(value), delay);
+    return () => clearTimeout(handler);
+  }, [value, delay]);
+  return state;
+};

apps/dashboard/src/hooks/useNumerFormatter.ts

@@ -14,7 +14,7 @@ export const formatNumber =
       return 'N/A';
     }
     return new Intl.NumberFormat(locale, {
-      maximumSignificantDigits: 20,
+      maximumSignificantDigits: 3,
     }).format(value);
   };