diff --git a/packages/sanity/src/structure/components/paneItem/PaneItem.tsx b/packages/sanity/src/structure/components/paneItem/PaneItem.tsx index d316313a6cd..862c0c27354 100644 --- a/packages/sanity/src/structure/components/paneItem/PaneItem.tsx +++ b/packages/sanity/src/structure/components/paneItem/PaneItem.tsx @@ -9,11 +9,11 @@ import {Box, type CardProps, Text} from '@sanity/ui' import { type ComponentType, type MouseEvent, - type ReactNode, startTransition, useCallback, useEffect, useMemo, + useRef, useState, } from 'react' import { @@ -139,10 +139,15 @@ export function PaneItem(props: PaneItemProps) { useEffect(() => setClicked(false), [selected]) // Preloads the edit state on hover, using concurrent rendering with `startTransition` so preloads can be interrupted and not block rendering - const [handleMouseEnter, handleMouseLeave, preload] = usePreloadEditState( - id, - value && isSanityDocument(value) ? schemaType?.name : undefined, - ) + const [preloading, setPreload] = useState(false) + const timeoutRef = useRef | null>(null) + const handleMouseEnter = useCallback(() => { + timeoutRef.current = setTimeout(() => startTransition(() => setPreload(true)), 400) + }, []) + const handleMouseLeave = useCallback(() => { + if (timeoutRef.current) clearTimeout(timeoutRef.current) + startTransition(() => setPreload(false)) + }, []) return ( {preview} - {preload} + {preloading && schemaType?.name && value && isSanityDocument(value) && ( + + )} ) } -function usePreloadEditState( - documentId: string, - documentType: string | undefined, -): [() => void, () => void, ReactNode] { - const [preloading, setPreload] = useState(false) - const handleMouseEnter = useCallback(() => startTransition(() => setPreload(true)), []) - const handleMouseLeave = useCallback(() => startTransition(() => setPreload(false)), []) - - return [ - handleMouseEnter, - handleMouseLeave, - preloading && documentType && ( - - ), - ] as const -} - function PreloadDocumentPane(props: {documentId: string; documentType: string}) { const {documentId, documentType} = props // Preload the edit state for the document, and keep it alive until mouse leave