diff --git a/CHANGELOG.md b/CHANGELOG.md index f45b25ed..8cc9391c 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/packages/web/src/hooks/usePrefetchFileSource.ts b/packages/web/src/hooks/usePrefetchFileSource.ts index 755d7fdb..de9cce34 100644 --- a/packages/web/src/hooks/usePrefetchFileSource.ts +++ b/packages/web/src/hooks/usePrefetchFileSource.ts @@ -4,13 +4,21 @@ 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({ @@ -18,8 +26,9 @@ export const usePrefetchFileSource = () => { repository: repoName, branch: revisionName, }, domain)), + staleTime, }); - }, [queryClient, domain]); + }, debounceDelay); return { prefetchFileSource }; } \ No newline at end of file diff --git a/packages/web/src/hooks/usePrefetchFolderContents.ts b/packages/web/src/hooks/usePrefetchFolderContents.ts index 8bbcc5f8..e135cb7a 100644 --- a/packages/web/src/hooks/usePrefetchFolderContents.ts +++ b/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 }; } \ No newline at end of file