mirror of
https://github.com/docmost/docmost.git
synced 2026-08-29 10:05:03 +08:00
fix flicker
This commit is contained in:
@@ -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,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user