Add debounce

Author: brendan-kellam

packages/web/src/hooks/usePrefetchFileSource.ts

@@ -4,22 +4,31 @@ import { useQueryClient } from "@tanstack/react-query";
 import { useDomain } from "./useDomain";
 import { unwrapServiceError } from "@/lib/utils";
 import { getFileSource } from "@/features/search/fileSourceApi";
-import { useCallback } from "react";
+import { useDebounceCallback } from "usehooks-ts";
 
-export const usePrefetchFileSource = () => {
+interface UsePrefetchFileSourceProps {
+    debounceDelay?: number;
+    staleTime?: number;
+}
+
+export const usePrefetchFileSource = ({
+    debounceDelay = 200,
+    staleTime = 5 * 60 * 1000, // 5 minutes
+}: UsePrefetchFileSourceProps = {}) => {
     const queryClient = useQueryClient();
     const domain = useDomain();
 
-    const prefetchFileSource = useCallback((repoName: string, revisionName: string, path: string) => {
+    const prefetchFileSource = useDebounceCallback((repoName: string, revisionName: string, path: string) => {
         queryClient.prefetchQuery({
             queryKey: ['fileSource', repoName, revisionName, path, domain],
             queryFn: () => unwrapServiceError(getFileSource({
                 fileName: path,
                 repository: repoName,
                 branch: revisionName,
             }, domain)),
+            staleTime,
         });
-    }, [queryClient, domain]);
+    }, debounceDelay);
 
     return { prefetchFileSource };
 }

packages/web/src/hooks/usePrefetchFolderContents.ts

@@ -3,14 +3,22 @@
 import { useQueryClient } from "@tanstack/react-query";
 import { useDomain } from "./useDomain";
 import { unwrapServiceError } from "@/lib/utils";
-import { useCallback } from "react";
 import { getFolderContents } from "@/features/fileTree/actions";
+import { useDebounceCallback } from "usehooks-ts";
 
-export const usePrefetchFolderContents = () => {
+interface UsePrefetchFolderContentsProps {
+    debounceDelay?: number;
+    staleTime?: number;
+}
+
+export const usePrefetchFolderContents = ({
+    debounceDelay = 200,
+    staleTime = 5 * 60 * 1000, // 5 minutes
+}: UsePrefetchFolderContentsProps = {}) => {
     const queryClient = useQueryClient();
     const domain = useDomain();
 
-    const prefetchFolderContents = useCallback((repoName: string, revisionName: string, path: string) => {
+    const prefetchFolderContents = useDebounceCallback((repoName: string, revisionName: string, path: string) => {
         queryClient.prefetchQuery({
             queryKey: ['tree', repoName, revisionName, path, domain],
             queryFn: () => unwrapServiceError(
@@ -20,8 +28,9 @@ export const usePrefetchFolderContents = () => {
                     path,
                 }, domain)
             ),
+            staleTime,
         });
-    }, [queryClient, domain]);
+    }, debounceDelay);
 
     return { prefetchFolderContents };
 }