fix: Add default debounce & staleTime to file/folder prefetching (#346)

Author: brendan-kellam

CHANGELOG.md

@@ -15,6 +15,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Text highlighting clarity. [#342](https://github.com/sourcebot-dev/sourcebot/pull/342)
 - Fixed repo list column header styling. [#344](https://github.com/sourcebot-dev/sourcebot/pull/344)
 - Clean up successful and failed jobs in Redis queues. [#343](https://github.com/sourcebot-dev/sourcebot/pull/343)
+- Fixed issue with files occasionally not loading after moving the cursor rapidly over the file browser. [#346](https://github.com/sourcebot-dev/sourcebot/pull/346)
 
 ## [4.2.0] - 2025-06-09
 

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 };
 }