fix: preload documents on hover

packages/sanity/src/structure/components/paneItem/PaneItem.tsx

@@ -10,9 +10,11 @@ import {
   type ComponentType,
   type MouseEvent,
   type ReactNode,
+  startTransition,
   useCallback,
   useEffect,
   useMemo,
+  useReducer,
   useState,
 } from 'react'
 import {
@@ -22,6 +24,7 @@ import {
   SanityDefaultPreview,
   useDocumentPresence,
   useDocumentPreviewStore,
+  useEditState,
   useSchema,
 } from 'sanity'
 
@@ -124,14 +127,6 @@ export function PaneItem(props: PaneItemProps) {
     documentPresence,
   ])
 
-  const Link = useMemo(
-    () =>
-      function LinkComponent(linkProps: {children: ReactNode}) {
-        return <ChildLink {...linkProps} childId={id} />
-      },
-    [ChildLink, id],
-  )
-
   const handleClick = useCallback((e: MouseEvent<HTMLElement>) => {
     if (e.metaKey) {
       setClicked(false)
@@ -144,16 +139,22 @@ export function PaneItem(props: PaneItemProps) {
   // Reset `clicked` state when `selected` prop changes
   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, preload] = usePreloadEditState(id, schemaType?.name, selected)
+
   return (
     <PreviewCard
       data-testid={`pane-item-${title}`}
       __unstable_focusRing
-      as={Link as FIXME}
+      as={ChildLink as FIXME}
+      // @ts-expect-error - `childId` is a valid prop on `ChildLink`
+      childId={id}
       data-as="a"
       margin={margin}
       marginBottom={marginBottom}
       marginTop={marginTop}
       onClick={handleClick}
+      onMouseEnter={handleMouseEnter}
       pressed={pressed}
       radius={2}
       selected={selected || clicked}
@@ -162,6 +163,52 @@ export function PaneItem(props: PaneItemProps) {
       tone="inherit"
     >
       {preview}
+      {preload}
     </PreviewCard>
   )
 }
+
+function usePreloadEditState(
+  documentId: string,
+  documentType: string | undefined,
+  selected: boolean | undefined,
+): [() => void, ReactNode] {
+  const [preloading, preload] = useReducer(() => true, false)
+  const handleMouseEnter = useCallback(() => startTransition(preload), [])
+
+  return [
+    handleMouseEnter,
+    !selected && preloading && documentType && (
+      <PreloadDocumentPane documentId={documentId} documentType={documentType} />
+    ),
+  ] as const
+}
+
+function PreloadDocumentPane(props: {documentId: string; documentType: string}) {
+  const {documentId, documentType} = props
+  const [loading, loaded] = useReducer(() => false, true)
+  const handleReady = useCallback(() => startTransition(loaded), [])
+
+  if (loading) {
+    return (
+      <PreloadEditState onReady={handleReady} documentId={documentId} documentType={documentType} />
+    )
+  }
+
+  return null
+}
+PreloadDocumentPane.displayName = 'PreloadDocumentPane'
+
+function PreloadEditState(props: {documentId: string; documentType: string; onReady: () => void}) {
+  const {onReady, documentId, documentType} = props
+  const editState = useEditState(documentId, documentType)
+
+  useEffect(() => {
+    if (editState.ready) {
+      onReady()
+    }
+  }, [editState.ready, onReady])
+
+  return null
+}
+PreloadEditState.displayName = 'PreloadEditState'