From 66c9ddf7ab92431b9c2f606ab637d65ebe862e58 Mon Sep 17 00:00:00 2001
From: Cody Olsen <stipsan@gmail.com>
Date: Thu, 19 Dec 2024 13:23:42 +0100
Subject: [PATCH] fix: preload documents on hover

---
 package.json                                  |  2 +-
 .../components/paneItem/PaneItem.tsx          | 49 +++++++++++++++----
 2 files changed, 41 insertions(+), 10 deletions(-)

diff --git a/package.json b/package.json
index 5f606446886..cfdb5257d10 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,7 @@
     "check:deps": "pnpm --recursive --parallel exec depcheck",
     "check:format": "prettier . --check",
     "check:lint": "turbo run lint --continue -- --quiet",
-    "check:react-compiler": "eslint --cache --no-inline-config --no-eslintrc --ext .cjs,.mjs,.js,.jsx,.ts,.tsx --parser @typescript-eslint/parser --plugin react-compiler --rule 'react-compiler/react-compiler: [warn]' --ignore-path .eslintignore.react-compiler --max-warnings 27 .",
+    "check:react-compiler": "eslint --cache --no-inline-config --no-eslintrc --ext .cjs,.mjs,.js,.jsx,.ts,.tsx --parser @typescript-eslint/parser --plugin react-compiler --rule 'react-compiler/react-compiler: [warn]' --ignore-path .eslintignore.react-compiler --max-warnings 26 .",
     "report:react-compiler-bailout": "eslint --cache --no-inline-config --no-eslintrc --ext .cjs,.mjs,.js,.jsx,.ts,.tsx --parser @typescript-eslint/parser --plugin react-compiler --rule 'react-compiler/react-compiler: [error,{__unstable_donotuse_reportAllBailouts:true}]' --ignore-path .eslintignore.react-compiler -f ./scripts/reactCompilerBailouts.cjs . || true",
     "check:test": "run-s test -- --silent",
     "check:types": "tsc && turbo run check:types --filter='./packages/*' --filter='./packages/@sanity/*'",
diff --git a/packages/sanity/src/structure/components/paneItem/PaneItem.tsx b/packages/sanity/src/structure/components/paneItem/PaneItem.tsx
index ddaa8d220be..d316313a6cd 100644
--- a/packages/sanity/src/structure/components/paneItem/PaneItem.tsx
+++ b/packages/sanity/src/structure/components/paneItem/PaneItem.tsx
@@ -10,6 +10,7 @@ import {
   type ComponentType,
   type MouseEvent,
   type ReactNode,
+  startTransition,
   useCallback,
   useEffect,
   useMemo,
@@ -22,6 +23,7 @@ import {
   SanityDefaultPreview,
   useDocumentPresence,
   useDocumentPreviewStore,
+  useEditState,
   useSchema,
 } from 'sanity'
 
@@ -124,14 +126,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 +138,26 @@ 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, handleMouseLeave, preload] = usePreloadEditState(
+    id,
+    value && isSanityDocument(value) ? schemaType?.name : undefined,
+  )
+
   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}
+      onMouseLeave={handleMouseLeave}
       pressed={pressed}
       radius={2}
       selected={selected || clicked}
@@ -162,6 +166,33 @@ export function PaneItem(props: PaneItemProps) {
       tone="inherit"
     >
       {preview}
+      {preload}
     </PreviewCard>
   )
 }
+
+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 && (
+      <PreloadDocumentPane documentId={documentId} documentType={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
+  useEditState(documentId, documentType)
+
+  return null
+}
+PreloadDocumentPane.displayName = 'PreloadDocumentPane'