fix(structure): memoize search query results

[bjoerge]

Description

This adds Stale-While-Revalidate behavior to document lists in the Studio. This means that when coming back to a previous list, we'll immediately show the last known contents, and then fetch the new version in the background. In many cases this means that going back and forth between document lists feels instant.

What to review

The actual SWR logic is implemented with an LRU cache in packages/sanity/src/structure/panes/documentList/listenSearchQuery.ts and it uses a memo key based on various input parameters for the search query request.

I took the liberty of refactoring some of the logic and renaming a few variables etc based on my (ever evolving) understanding of the existing code. Please let me know if I missed the mark on something.

Testing

I couldn't think of a good way to robustly test the SWR behavior introduced here. Let me know if you have any suggestions!

I've manually verified the following:

• Document lists updates in real-time
• Searching in lists works as before
• If navigating back to a list triggers a background refresh, so if a document has been added or removed it's reflected after a short while.
• Sorting lists works as before
• Scrolling to the end of a list fetches the "full" list (show a loading spinner at the bottom and retains scroll position)
• Loading variants works as they used to (I also added a new "subtle" one that appears if revalidating takes longer than a few hundred milliseconds)
• Error handling and retrying works as before

@hermanwikner and @robinpyon tagging you as reviewers here as well since you did the original work on doument list search including listenSearchQuery and useDocumentList.

Notes for release

• Navigating between previously visited document lists in the studio is now instant

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
page-building-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 30, 2024 3:18pm
performance-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 30, 2024 3:18pm
test-compiled-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 30, 2024 3:18pm
test-next-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 30, 2024 3:18pm
test-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 30, 2024 3:18pm

1 Skipped Deployment

Name	Status	Preview	Comments	Updated (UTC)
studio-workshop	⬜️ Ignored (Inspect)	Visit Preview		Sep 30, 2024 3:18pm

[github-actions]

No changes to documentation

[github-actions]

Component Testing Report Updated Sep 30, 2024 3:22 PM (UTC)

✅ All Tests Passed -- expand for details

File	Status	Duration	Passed	Skipped	Failed
comments/CommentInput.spec.tsx	✅ Passed (Inspect)	50s	15	0	0
formBuilder/ArrayInput.spec.tsx	✅ Passed (Inspect)	8s	3	0	0
formBuilder/inputs/PortableText/Annotations.spec.tsx	✅ Passed (Inspect)	30s	6	0	0
formBuilder/inputs/PortableText/copyPaste/CopyPaste.spec.tsx	✅ Passed (Inspect)	37s	11	7	0
formBuilder/inputs/PortableText/copyPaste/CopyPasteFields.spec.tsx	✅ Passed (Inspect)	0s	0	12	0
formBuilder/inputs/PortableText/Decorators.spec.tsx	✅ Passed (Inspect)	17s	6	0	0
formBuilder/inputs/PortableText/DisableFocusAndUnset.spec.tsx	✅ Passed (Inspect)	10s	3	0	0
formBuilder/inputs/PortableText/DragAndDrop.spec.tsx	✅ Passed (Inspect)	3m 0s	0	0	0
formBuilder/inputs/PortableText/FocusTracking.spec.tsx	✅ Passed (Inspect)	45s	15	0	0
formBuilder/inputs/PortableText/Input.spec.tsx	✅ Passed (Inspect)	1m 46s	21	0	0
formBuilder/inputs/PortableText/ObjectBlock.spec.tsx	✅ Passed (Inspect)	1m 15s	18	0	0
formBuilder/inputs/PortableText/PresenceCursors.spec.tsx	✅ Passed (Inspect)	9s	3	9	0
formBuilder/inputs/PortableText/RangeDecoration.spec.tsx	✅ Passed (Inspect)	27s	9	0	0
formBuilder/inputs/PortableText/Styles.spec.tsx	✅ Passed (Inspect)	18s	6	0	0
formBuilder/inputs/PortableText/Toolbar.spec.tsx	✅ Passed (Inspect)	36s	12	0	0
formBuilder/tree-editing/TreeEditing.spec.tsx	✅ Passed (Inspect)	0s	0	3	0
formBuilder/tree-editing/TreeEditingNestedObjects.spec.tsx	✅ Passed (Inspect)	0s	0	3	0

[bjoerge]

• fix(core): fix reference preview flickering and improve loading #7563
• refactor(core): add reusable rxSwr operator #7562
• fix(structure): memoize search query results #7555 👈
• next

This stack of pull requests is managed by Graphite. Learn more about stacking.

Join @bjoerge and the rest of your teammates on Graphite

[hermanwikner]

This is great – feels so snappy and nice, and the code is much cleaner now 🙇‍♂️

I’ve tested the things you listed and have been trying find any cases where it doesn’t work properly, but have been unable to!