fix flicker

This commit is contained in:
Philipinho
2026-01-31 23:50:55 +00:00
parent 4873f7b9ff
commit 6c664a366f
3 changed files with 30 additions and 16 deletions
@@ -10,7 +10,7 @@ interface HistoryItemProps {
historyItem: IPageHistory; historyItem: IPageHistory;
index: number; index: number;
onSelect: (id: string, index: number) => void; onSelect: (id: string, index: number) => void;
onHover?: (id: string) => void; onHover?: (id: string, index: number) => void;
onHoverEnd?: () => void; onHoverEnd?: () => void;
isActive: boolean; isActive: boolean;
} }
@@ -28,8 +28,8 @@ const HistoryItem = memo(function HistoryItem({
}, [onSelect, historyItem.id, index]); }, [onSelect, historyItem.id, index]);
const handleMouseEnter = useCallback(() => { const handleMouseEnter = useCallback(() => {
onHover?.(historyItem.id); onHover?.(historyItem.id, index);
}, [onHover, historyItem.id]); }, [onHover, historyItem.id, index]);
return ( return (
<UnstyledButton <UnstyledButton
@@ -1,9 +1,8 @@
import { import {
usePageHistoryListQuery, usePageHistoryListQuery,
usePageHistoryQuery, usePageHistoryQuery,
prefetchPageHistory,
} from "@/features/page-history/queries/page-history-query"; } from "@/features/page-history/queries/page-history-query";
import { getPageHistoryById } from "@/features/page-history/services/page-history-service";
import { queryClient } from "@/main";
import HistoryItem from "@/features/page-history/components/history-item"; import HistoryItem from "@/features/page-history/components/history-item";
import { import {
activeHistoryIdAtom, activeHistoryIdAtom,
@@ -36,7 +35,7 @@ import {
SpaceCaslSubject, SpaceCaslSubject,
} from "@/features/space/permissions/permissions.type.ts"; } from "@/features/space/permissions/permissions.type.ts";
const PREFETCH_DELAY_MS = 300; const PREFETCH_DELAY_MS = 150;
interface Props { interface Props {
pageId: string; pageId: string;
@@ -111,15 +110,19 @@ function HistoryList({ pageId }: Props) {
} }
}, []); }, []);
const handleHover = useCallback((historyId: string) => { const handleHover = useCallback(
clearPrefetchTimeout(); (historyId: string, index: number) => {
prefetchTimeoutRef.current = setTimeout(() => { clearPrefetchTimeout();
queryClient.prefetchQuery({ prefetchTimeoutRef.current = setTimeout(() => {
queryKey: ["page-history", historyId], prefetchPageHistory(historyId);
queryFn: () => getPageHistoryById(historyId), const prevId = historyItems[index + 1]?.id;
}); if (prevId) {
}, PREFETCH_DELAY_MS); prefetchPageHistory(prevId);
}, [clearPrefetchTimeout]); }
}, PREFETCH_DELAY_MS);
},
[clearPrefetchTimeout, historyItems],
);
useEffect(() => { useEffect(() => {
return clearPrefetchTimeout; return clearPrefetchTimeout;
@@ -11,6 +11,17 @@ import {
} from "@/features/page-history/services/page-history-service"; } from "@/features/page-history/services/page-history-service";
import { IPageHistory } from "@/features/page-history/types/page.types"; import { IPageHistory } from "@/features/page-history/types/page.types";
import { IPagination } from "@/lib/types.ts"; import { IPagination } from "@/lib/types.ts";
import { queryClient } from "@/main";
const HISTORY_STALE_TIME = 10 * 60 * 1000;
export function prefetchPageHistory(historyId: string) {
return queryClient.prefetchQuery({
queryKey: ["page-history", historyId],
queryFn: () => getPageHistoryById(historyId),
staleTime: HISTORY_STALE_TIME,
});
}
export function usePageHistoryListQuery( export function usePageHistoryListQuery(
pageId: string, pageId: string,
@@ -32,6 +43,6 @@ export function usePageHistoryQuery(
queryKey: ["page-history", historyId], queryKey: ["page-history", historyId],
queryFn: () => getPageHistoryById(historyId), queryFn: () => getPageHistoryById(historyId),
enabled: !!historyId, enabled: !!historyId,
staleTime: 10 * 60 * 1000, staleTime: HISTORY_STALE_TIME,
}); });
} }