Skip to content

Commit

Permalink
fix: preload documents on hover
Browse files Browse the repository at this point in the history
  • Loading branch information
stipsan committed Dec 19, 2024
1 parent 67abc06 commit 66c9ddf
Show file tree
Hide file tree
Showing 2 changed files with 41 additions and 10 deletions.
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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/*'",
Expand Down
49 changes: 40 additions & 9 deletions packages/sanity/src/structure/components/paneItem/PaneItem.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import {
type ComponentType,
type MouseEvent,
type ReactNode,
startTransition,
useCallback,
useEffect,
useMemo,
Expand All @@ -22,6 +23,7 @@ import {
SanityDefaultPreview,
useDocumentPresence,
useDocumentPreviewStore,
useEditState,
useSchema,
} from 'sanity'

Expand Down Expand Up @@ -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)
Expand All @@ -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}
Expand All @@ -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'

0 comments on commit 66c9ddf

Please sign in to comment.