fix: delays rendering the Start in Create banner until document is ready #8020

snorrees · 2024-12-12T08:58:41Z

Description

Currently, the Start in Create banner will appear when a document pane is loading:

With this fix, the banner should no longer appear when the document pane is in a loading state.

Background

Got a report that the Start in Create banner was breifly flashing (appearing and disappearing for < 500ms) on localhost.
I was unable to reproduce that issue, but noticed that when running on 3G Network, the Create banner will render whilst the document is loading.

This PR delays rendering the banner until the document is ready. Opted for prop-drilling to get the ready state, as not to add any new useDocumentPane calls.

The ready check is done in the wrapper component where appId checks runs; this allows the initial requests to run in parallel with document load, so the data is ready as soon as possible.

What to review

The code ;)

Testing

Go to https://create-integration-test.sanity.studio/fallback/structure/create-test-article
Open up Network tab and put it into 3G mode.
Create a new document.
While the pane is loading there should be no Create banner
The banner should appear with the document (or shortly thereafter, on first document opened in a reloaded studio after which appId data is cached)

Notes for release

N/A

vercel · 2024-12-12T08:58:46Z

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 12, 2024 8:58am
performance-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 12, 2024 8:58am
test-next-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 12, 2024 8:58am
test-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 12, 2024 8:58am

1 Skipped Deployment

Name	Status	Preview	Comments	Updated (UTC)
studio-workshop	⬜️ Ignored (Inspect)			Dec 12, 2024 8:58am

github-actions · 2024-12-12T08:59:30Z

No changes to documentation

github-actions · 2024-12-12T09:05:31Z

Component Testing Report Updated Dec 12, 2024 9:05 AM (UTC)

✅ All Tests Passed -- expand for details

File	Status	Duration	Passed	Skipped
comments/CommentInput.spec.tsx	✅ Passed (Inspect)	1m 16s	15	0
formBuilder/ArrayInput.spec.tsx	✅ Passed (Inspect)	14s	3	0
formBuilder/inputs/PortableText/Annotations.spec.tsx	✅ Passed (Inspect)	41s	6	0
formBuilder/inputs/PortableText/copyPaste/CopyPaste.spec.tsx	✅ Passed (Inspect)	59s	11	7
formBuilder/inputs/PortableText/copyPaste/CopyPasteFields.spec.tsx	✅ Passed (Inspect)	0s	0	12
formBuilder/inputs/PortableText/Decorators.spec.tsx	✅ Passed (Inspect)	30s	6	0
formBuilder/inputs/PortableText/DisableFocusAndUnset.spec.tsx	✅ Passed (Inspect)	17s	3	0
formBuilder/inputs/PortableText/DragAndDrop.spec.tsx	✅ Passed (Inspect)	2m 9s	2	0
formBuilder/inputs/PortableText/FocusTracking.spec.tsx	✅ Passed (Inspect)	1m 20s	15	0
formBuilder/inputs/PortableText/Input.spec.tsx	✅ Passed (Inspect)	2m 49s	21	0
formBuilder/inputs/PortableText/ObjectBlock.spec.tsx	✅ Passed (Inspect)	1m 55s	18	0
formBuilder/inputs/PortableText/PresenceCursors.spec.tsx	✅ Passed (Inspect)	16s	3	9
formBuilder/inputs/PortableText/RangeDecoration.spec.tsx	✅ Passed (Inspect)	45s	9	0
formBuilder/inputs/PortableText/Styles.spec.tsx	✅ Passed (Inspect)	31s	6	0
formBuilder/inputs/PortableText/Toolbar.spec.tsx	✅ Passed (Inspect)	1m 0s	12	0
formBuilder/tree-editing/TreeEditing.spec.tsx	✅ Passed (Inspect)	0s	0	3
formBuilder/tree-editing/TreeEditingNestedObjects.spec.tsx	✅ Passed (Inspect)	0s	0	3

github-actions · 2024-12-12T09:10:49Z

⚡️ Editor Performance Report

Updated Thu, 12 Dec 2024 09:10:48 GMT

Benchmark	reference ^{latency of sanity@latest}	experiment ^{latency of this branch}	Δ (%) ^{latency difference}
article (title)	24.4 efps (41ms)	25.0 efps (40ms)	-1ms (-2.4%)	✅
article (body)	71.9 efps (14ms)	67.6 efps (15ms)	+1ms (-/-%)	✅
article (string inside object)	23.8 efps (42ms)	26.3 efps (38ms)	-4ms (-9.5%)	✅
article (string inside array)	23.3 efps (43ms)	22.7 efps (44ms)	+1ms (+2.3%)	✅
synthetic (title)	18.2 efps (55ms)	18.5 efps (54ms)	-1ms (-1.8%)	✅
synthetic (string inside object)	17.9 efps (56ms)	20.0 efps (50ms)	-6ms (-10.7%)	✅

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)	41ms	43ms	44ms	69ms	22ms	11.6s
article (body)	14ms	17ms	20ms	40ms	40ms	4.6s
article (string inside object)	42ms	45ms	48ms	190ms	168ms	7.1s
article (string inside array)	43ms	44ms	48ms	165ms	146ms	7.0s
synthetic (title)	55ms	57ms	63ms	112ms	291ms	14.1s
synthetic (string inside object)	56ms	59ms	70ms	324ms	707ms	8.7s

🧪 Experiment result

The performance result of this branch

Benchmark	latency	p75	p90	p99	blocking time	test duration
article (title)	40ms	45ms	54ms	210ms	185ms	13.1s
article (body)	15ms	17ms	30ms	159ms	195ms	5.3s
article (string inside object)	38ms	41ms	46ms	81ms	250ms	6.9s
article (string inside array)	44ms	46ms	53ms	280ms	305ms	7.3s
synthetic (title)	54ms	56ms	61ms	104ms	345ms	13.9s
synthetic (string inside object)	50ms	51ms	55ms	401ms	74ms	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.

robinpyon

Got a report that the Start in Create banner was breifly flashing (appearing and disappearing for < 500ms) on localhost. I was unable to reproduce that issue, but noticed that when running on 3G Network, the Create banner will render whilst the document is loading.

I am able to repro this flashing banner issue in test studio locally (with throttled network), though I can confirm this fix addresses that issue too.

pedrobonamin

Looks good to me, thanks!

* next: (49 commits) fix: delays rendering the Start in Create banner until document is ready (#8020) fix(deps): update dependency @sanity/ui to ^2.10.9 (#8009) chore(deps): dedupe pnpm-lock.yaml (#8023) test(playwright-ct): fix issues and flake (#8016) feat(cli): misc copy changes (#8003) feat(cli): remove is-builtin-module (#6579) v3.67.1 chore(deps): bump minimum requirement of @sanity/import and @sanity/export (#8012) chore(deps): update dependency @sanity/pkg-utils to v6.12.0 (#8010) fix(core): tasks UpdatedTimeAgo should be a hook (#8011) v3.67.0 chore(prettier): fix unformatted files 🤖 ✨ (#8006) chore: reduce renovate double PR noise fix(deps): update dependency @sanity/ui to ^2.10.7 (#8005) fix(deps): update dependency @sanity/ui to ^2.10.7 (#7998) feat(cli): use `@vercel/frameworks` in `bootstrapRemoteTemplate` (#8001) feat: switch create integration to opt-out flow (#8002) feat: use eslint 9 for new studios (#7978) fix(sanity): optimise getLeafWeights to not stack overflow (#7999) feat(test-studio): enable `groq2024` search strategy ...

fix: delays rendering the Start in Create banner until document is ready

0f2cf84

snorrees requested review from robinpyon and EsaNuurtamo December 12, 2024 09:00

robinpyon approved these changes Dec 12, 2024

View reviewed changes

snorrees marked this pull request as ready for review December 12, 2024 11:47

snorrees requested a review from a team as a code owner December 12, 2024 11:47

snorrees requested review from rexxars and removed request for a team December 12, 2024 11:47

pedrobonamin approved these changes Dec 12, 2024

View reviewed changes

snorrees added this pull request to the merge queue Dec 12, 2024

Merged via the queue into next with commit fa403da Dec 12, 2024
57 of 58 checks passed

snorrees deleted the ready-create-banner branch December 12, 2024 12:04

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: delays rendering the Start in Create banner until document is ready #8020

fix: delays rendering the Start in Create banner until document is ready #8020

snorrees commented Dec 12, 2024 •

edited

Loading

vercel bot commented Dec 12, 2024

github-actions bot commented Dec 12, 2024

github-actions bot commented Dec 12, 2024

github-actions bot commented Dec 12, 2024

🏠 Reference result

🧪 Experiment result

📚 Glossary

column definitions

robinpyon left a comment

pedrobonamin left a comment

fix: delays rendering the Start in Create banner until document is ready #8020

fix: delays rendering the Start in Create banner until document is ready #8020

Conversation

snorrees commented Dec 12, 2024 • edited Loading

Description

Background

What to review

Testing

Notes for release

vercel bot commented Dec 12, 2024

github-actions bot commented Dec 12, 2024

github-actions bot commented Dec 12, 2024

github-actions bot commented Dec 12, 2024

⚡️ Editor Performance Report

🏠 Reference result

🧪 Experiment result

📚 Glossary

column definitions

robinpyon left a comment

Choose a reason for hiding this comment

pedrobonamin left a comment

Choose a reason for hiding this comment

snorrees commented Dec 12, 2024 •

edited

Loading