fix(preview): fix issue sometimes causing hotspot menu to stay a gray box after uploading

[bjoerge]

Description

Occationally after uploading an image, the hotspot and crop icons remains greyed out forever.

Traced this down to being caused by us returning null from the batch fetcher we use to fetch previewed documents, in combination with a subsequent check for undefined to check if we need to refetch after document creations as a safeguard against initial indexing taking some time.

What to review

Commits can be reviewed one-by-one.

• The fix is in the first commit
• The second removes moot error handling: We're connected to a shared ("hot") observable emitting the "current preview value" so the retrying logic won't trigger any refetches here
• The third cleans up the code slightly and removes some unneccesary as any casts

Testing

A bit involved to add unit test for this particular case as it is highly dependent on backend index latency, but will do some follow improvements and see if I can include some unit tests with those.

Notes for release

• Fixes an issue that could sometimes leave the hotspot and crop icons remains greyed out after uploading an image.

[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	Dec 16, 2024 6:15pm
performance-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 16, 2024 6:15pm
test-next-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 16, 2024 6:15pm
test-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 16, 2024 6:15pm

1 Skipped Deployment

Name	Status	Preview	Comments	Updated (UTC)
studio-workshop	⬜️ Ignored (Inspect)	Visit Preview		Dec 16, 2024 6:15pm

[github-actions]

No changes to documentation

[github-actions]

Component Testing Report Updated Dec 16, 2024 6:11 PM (UTC)

❌ Failed Tests (2) -- expand for details

File	Status	Duration	Passed	Skipped	Failed
comments/CommentInput.spec.tsx	✅ Passed (Inspect)	1m 11s	15	0	0
formBuilder/ArrayInput.spec.tsx	✅ Passed (Inspect)	15s	3	0	0
formBuilder/inputs/PortableText/Annotations.spec.tsx	✅ Passed (Inspect)	42s	6	0	0
formBuilder/inputs/PortableText/copyPaste/CopyPaste.spec.tsx	✅ Passed (Inspect)	58s	11	7	0
formBuilder/inputs/PortableText/copyPaste/CopyPasteFields.spec.tsx	✅ Passed (Inspect)	0s	0	12	0
formBuilder/inputs/PortableText/Decorators.spec.tsx	✅ Passed (Inspect)	29s	6	0	0
formBuilder/inputs/PortableText/DisableFocusAndUnset.spec.tsx	✅ Passed (Inspect)	16s	3	0	0
formBuilder/inputs/PortableText/DragAndDrop.spec.tsx	❌ Failed (Inspect)	1m 48s	4	0	2
formBuilder/inputs/PortableText/FocusTracking.spec.tsx	✅ Passed (Inspect)	1m 14s	15	0	0
formBuilder/inputs/PortableText/Input.spec.tsx	✅ Passed (Inspect)	3m 4s	21	0	0
formBuilder/inputs/PortableText/ObjectBlock.spec.tsx	✅ Passed (Inspect)	1m 50s	18	0	0
formBuilder/inputs/PortableText/PresenceCursors.spec.tsx	✅ Passed (Inspect)	14s	3	9	0
formBuilder/inputs/PortableText/RangeDecoration.spec.tsx	✅ Passed (Inspect)	43s	9	0	0
formBuilder/inputs/PortableText/Styles.spec.tsx	✅ Passed (Inspect)	29s	6	0	0
formBuilder/inputs/PortableText/Toolbar.spec.tsx	✅ Passed (Inspect)	1m 55s	21	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

[github-actions]

⚡️ Editor Performance Report

Updated Mon, 16 Dec 2024 18:31:18 GMT

Benchmark	reference latency of sanity@latest	experiment latency of this branch	Δ (%) latency difference
article (title)	25.0 efps (40ms)	26.3 efps (38ms)	-2ms (-5.0%)	✅
article (body)	72.2 efps (14ms)	77.5 efps (13ms)	-1ms (-/-%)	✅
article (string inside object)	28.6 efps (35ms)	27.8 efps (36ms)	+1ms (+2.9%)	✅
article (string inside array)	22.7 efps (44ms)	22.7 efps (44ms)	+0ms (-/-%)	✅
recipe (name)	50.0 efps (20ms)	50.0 efps (20ms)	+0ms (-/-%)	✅
recipe (description)	55.6 efps (18ms)	52.6 efps (19ms)	+1ms (+5.6%)	✅
recipe (instructions)	99.9+ efps (5ms)	99.9+ efps (5ms)	+0ms (-/-%)	✅
synthetic (title)	18.9 efps (53ms)	19.0 efps (53ms)	-1ms (-0.9%)	✅
synthetic (string inside object)	18.5 efps (54ms)	18.9 efps (53ms)	-1ms (-1.9%)	✅

efps — editor "frames per second". The number of updates assumed to be possible within a second.

Derived from input latency. efps = 1000 / input_latency

Detailed information

🏠 Reference result

The performance result of sanity@latest

Benchmark	latency	p75	p90	p99	blocking time	test duration
article (title)	40ms	42ms	58ms	228ms	722ms	10.6s
article (body)	14ms	16ms	18ms	35ms	63ms	4.7s
article (string inside object)	35ms	36ms	37ms	44ms	0ms	6.0s
article (string inside array)	44ms	46ms	50ms	78ms	36ms	6.8s
recipe (name)	20ms	21ms	23ms	107ms	22ms	7.6s
recipe (description)	18ms	19ms	21ms	37ms	0ms	4.5s
recipe (instructions)	5ms	6ms	7ms	8ms	0ms	3.0s
synthetic (title)	53ms	55ms	56ms	59ms	238ms	12.7s
synthetic (string inside object)	54ms	55ms	57ms	68ms	260ms	7.4s

🧪 Experiment result

The performance result of this branch

Benchmark	latency	p75	p90	p99	blocking time	test duration
article (title)	38ms	41ms	43ms	162ms	164ms	11.0s
article (body)	13ms	15ms	16ms	19ms	78ms	4.5s
article (string inside object)	36ms	38ms	42ms	176ms	153ms	6.4s
article (string inside array)	44ms	46ms	51ms	105ms	177ms	7.0s
recipe (name)	20ms	22ms	23ms	32ms	0ms	6.9s
recipe (description)	19ms	20ms	22ms	24ms	0ms	4.6s
recipe (instructions)	5ms	6ms	7ms	8ms	0ms	3.0s
synthetic (title)	53ms	55ms	58ms	104ms	287ms	13.2s
synthetic (string inside object)	53ms	55ms	57ms	417ms	900ms	8.0s

📚 Glossary

column definitions

• benchmark — the name of the test, e.g. "article", followed by the label of the field being measured, e.g. "(title)".
• latency — the time between when a key was pressed and when it was rendered. derived from a set of samples. the median (p50) is shown to show the most common latency.
• p75 — the 75th percentile of the input latency in the test run. 75% of the sampled inputs in this benchmark were processed faster than this value. this provides insight into the upper range of typical performance.
• p90 — the 90th percentile of the input latency in the test run. 90% of the sampled inputs were faster than this. this metric helps identify slower interactions that occurred less frequently during the benchmark.
• p99 — the 99th percentile of the input latency in the test run. only 1% of sampled inputs were slower than this. this represents the worst-case scenarios encountered during the benchmark, useful for identifying potential performance outliers.
• blocking time — the total time during which the main thread was blocked, preventing user input and UI updates. this metric helps identify performance bottlenecks that may cause the interface to feel unresponsive.
• test duration — how long the test run took to complete.

[bjoerge]

The null is coming from here (which never returns undefined, causing the issue in the first place):

sanity/packages/sanity/src/core/preview/utils/optimizeQuery.ts

Line 61 in b14622e

reprojected[resultIdx] = found || null

[cngonzalez]

This makes sense to me, with one clarifying question: there's no reason to retry, if I understand correctly? We can expect a non-null value to emit after a null value if, indeed, that is the case?

[bjoerge]

thank you for the review @cngonzalez!

with one clarifying question: there's no reason to retry, if I understand correctly?

Correct! The listener already have retrying built in, so it will does it best to always stay connected as long as it has 1 or more subscribers.

We can expect a non-null value to emit after a null value if, indeed, that is the case?

Normally yes – technically you can get null and then null either because:

1. the document is created then deleted right after
2. the document has not yet been indexed in the query store, even after the delayed fetch returns. I expect this to happen very rarely, but realized that we can fix this too by keeping track of the "latest" revision id and keep fetching until we have it (working on a follow-up fix for this)