fix flicker

apps/client/src/features/page-history/components/history-item.tsx

@@ -10,7 +10,7 @@ interface HistoryItemProps {
   historyItem: IPageHistory;
   index: number;
   onSelect: (id: string, index: number) => void;
-  onHover?: (id: string) => void;
+  onHover?: (id: string, index: number) => void;
   onHoverEnd?: () => void;
   isActive: boolean;
 }
@@ -28,8 +28,8 @@ const HistoryItem = memo(function HistoryItem({
   }, [onSelect, historyItem.id, index]);
 
   const handleMouseEnter = useCallback(() => {
-    onHover?.(historyItem.id);
-  }, [onHover, historyItem.id]);
+    onHover?.(historyItem.id, index);
+  }, [onHover, historyItem.id, index]);
 
   return (
     <UnstyledButton

apps/client/src/features/page-history/components/history-list.tsx

@@ -1,9 +1,8 @@
 import {
   usePageHistoryListQuery,
   usePageHistoryQuery,
+  prefetchPageHistory,
 } 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 {
   activeHistoryIdAtom,
@@ -36,7 +35,7 @@ import {
   SpaceCaslSubject,
 } from "@/features/space/permissions/permissions.type.ts";
 
-const PREFETCH_DELAY_MS = 300;
+const PREFETCH_DELAY_MS = 150;
 
 interface Props {
   pageId: string;
@@ -111,15 +110,19 @@ function HistoryList({ pageId }: Props) {
     }
   }, []);
 
-  const handleHover = useCallback((historyId: string) => {
-    clearPrefetchTimeout();
-    prefetchTimeoutRef.current = setTimeout(() => {
-      queryClient.prefetchQuery({
-        queryKey: ["page-history", historyId],
-        queryFn: () => getPageHistoryById(historyId),
-      });
-    }, PREFETCH_DELAY_MS);
-  }, [clearPrefetchTimeout]);
+  const handleHover = useCallback(
+    (historyId: string, index: number) => {
+      clearPrefetchTimeout();
+      prefetchTimeoutRef.current = setTimeout(() => {
+        prefetchPageHistory(historyId);
+        const prevId = historyItems[index + 1]?.id;
+        if (prevId) {
+          prefetchPageHistory(prevId);
+        }
+      }, PREFETCH_DELAY_MS);
+    },
+    [clearPrefetchTimeout, historyItems],
+  );
 
   useEffect(() => {
     return clearPrefetchTimeout;

apps/client/src/features/page-history/queries/page-history-query.ts

@@ -11,6 +11,17 @@ import {
 } from "@/features/page-history/services/page-history-service";
 import { IPageHistory } from "@/features/page-history/types/page.types";
 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(
   pageId: string,
@@ -32,6 +43,6 @@ export function usePageHistoryQuery(
     queryKey: ["page-history", historyId],
     queryFn: () => getPageHistoryById(historyId),
     enabled: !!historyId,
-    staleTime: 10 * 60 * 1000,
+    staleTime: HISTORY_STALE_TIME,
   });
 }