fix: improve color scheme store perf #8059

stipsan · 2024-12-13T19:14:40Z

Description

This refactor is mostly about making the React Compiler support optimizing the ColorSchemeProvider component, so it can be excluded from Million Lint reports and not show up as false positives (as it re-renders only when the color scheme is changed manually, which is rare).

What to review

Does it make sense?

Testing

Tested manually, unsure if our E2E suite checks color scheme switching 🤔

Notes for release

N/A perf improvement too small to be worth calling out

vercel · 2024-12-13T19:14:44Z

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

1 Skipped Deployment

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

github-actions · 2024-12-13T19:19:28Z

No changes to documentation

github-actions · 2024-12-13T19:26:41Z

Component Testing Report Updated Dec 16, 2024 10:18 PM (UTC)

❌ Failed Tests (2) -- expand for details

File	Status	Duration	Passed	Skipped	Failed
comments/CommentInput.spec.tsx	✅ Passed (Inspect)	1m 10s	15	0	0
formBuilder/ArrayInput.spec.tsx	✅ Passed (Inspect)	13s	3	0	0
formBuilder/inputs/PortableText/Annotations.spec.tsx	✅ Passed (Inspect)	41s	6	0	0
formBuilder/inputs/PortableText/copyPaste/CopyPaste.spec.tsx	✅ Passed (Inspect)	56s	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)	2m 58s	21	0	0
formBuilder/inputs/PortableText/ObjectBlock.spec.tsx	✅ Passed (Inspect)	1m 48s	18	0	0
formBuilder/inputs/PortableText/PresenceCursors.spec.tsx	✅ Passed (Inspect)	14s	3	9	0
formBuilder/inputs/PortableText/Styles.spec.tsx	✅ Passed (Inspect)	29s	6	0	0
formBuilder/inputs/PortableText/Toolbar.spec.tsx	✅ Passed (Inspect)	1m 52s	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 · 2024-12-13T19:27:07Z

⚡️ Editor Performance Report

Updated Mon, 16 Dec 2024 22:21:12 GMT

Benchmark	reference ^{latency of sanity@latest}	experiment ^{latency of this branch}	Δ (%) ^{latency difference}
article (title)	27.0 efps (37ms)	25.3 efps (40ms)	+3ms (+6.8%)	✅
article (body)	71.9 efps (14ms)	72.5 efps (14ms)	-0ms (-/-%)	✅
article (string inside object)	25.0 efps (40ms)	25.3 efps (40ms)	-1ms (-1.3%)	✅
article (string inside array)	23.8 efps (42ms)	21.1 efps (48ms)	+6ms (+13.1%)	✅
recipe (name)	50.0 efps (20ms)	52.6 efps (19ms)	-1ms (-5.0%)	✅
recipe (description)	58.8 efps (17ms)	58.8 efps (17ms)	+0ms (-/-%)	✅
recipe (instructions)	99.9+ efps (5ms)	99.9+ efps (5ms)	+0ms (-/-%)	✅
synthetic (title)	18.5 efps (54ms)	18.5 efps (54ms)	+0ms (-/-%)	✅
synthetic (string inside object)	19.6 efps (51ms)	18.3 efps (55ms)	+4ms (+6.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)	37ms	40ms	44ms	136ms	18ms	9.6s
article (body)	14ms	16ms	21ms	68ms	43ms	4.8s
article (string inside object)	40ms	44ms	49ms	158ms	154ms	6.8s
article (string inside array)	42ms	45ms	49ms	75ms	27ms	6.7s
recipe (name)	20ms	22ms	25ms	29ms	0ms	6.9s
recipe (description)	17ms	19ms	21ms	24ms	0ms	4.5s
recipe (instructions)	5ms	6ms	8ms	8ms	0ms	3.0s
synthetic (title)	54ms	57ms	61ms	301ms	731ms	13.4s
synthetic (string inside object)	51ms	55ms	64ms	141ms	957ms	8.9s

🧪 Experiment result

The performance result of this branch

Benchmark	latency	p75	p90	p99	blocking time	test duration
article (title)	40ms	42ms	45ms	60ms	246ms	11.3s
article (body)	14ms	16ms	18ms	127ms	181ms	4.9s
article (string inside object)	40ms	41ms	43ms	50ms	0ms	6.4s
article (string inside array)	48ms	49ms	52ms	59ms	6ms	6.8s
recipe (name)	19ms	23ms	31ms	51ms	0ms	7.5s
recipe (description)	17ms	18ms	19ms	24ms	0ms	4.4s
recipe (instructions)	5ms	6ms	7ms	18ms	0ms	3.0s
synthetic (title)	54ms	55ms	58ms	66ms	277ms	13.1s
synthetic (string inside object)	55ms	58ms	67ms	224ms	313ms	7.7s

📚 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.

stipsan · 2024-12-16T21:54:13Z

packages/sanity/src/core/studio/colorSchemeStore.ts

+/** @internal */
+export const LOCAL_STORAGE_KEY = 'sanityStudio:ui:colorScheme'
+
+let snapshot: StudioThemeColorSchemeKey


React Compiler doesn't like writing to ESM bindings like this one, during render.
That's fine, we can move it into a separate file like this and the compiler no longer complains, as it's out of scope :)

vercel bot deployed to Preview – page-building-studio December 13, 2024 19:22 View deployment

vercel bot deployed to Preview – performance-studio December 13, 2024 19:22 View deployment

vercel bot deployed to Preview – test-studio December 13, 2024 19:25 View deployment

vercel bot deployed to Preview – test-next-studio December 13, 2024 19:31 View deployment

stipsan force-pushed the add-million-lint-mode branch from 9d075f4 to f5cd7df Compare December 16, 2024 11:31

Base automatically changed from add-million-lint-mode to next December 16, 2024 13:26

stipsan force-pushed the improve-color-scheme-store-perf branch from cd523c2 to 558cd7a Compare December 16, 2024 21:23

vercel bot deployed to Preview – page-building-studio December 16, 2024 21:35 View deployment

vercel bot deployed to Preview – performance-studio December 16, 2024 21:36 View deployment

vercel bot deployed to Preview – test-studio December 16, 2024 21:36 View deployment

vercel bot deployed to Preview – test-next-studio December 16, 2024 21:44 View deployment

stipsan commented Dec 16, 2024

View reviewed changes

stipsan marked this pull request as ready for review December 16, 2024 22:06

stipsan requested a review from a team as a code owner December 16, 2024 22:06

stipsan requested review from rexxars and removed request for a team December 16, 2024 22:06

stipsan enabled auto-merge December 16, 2024 22:06

fix: improve color scheme store perf

04c87f4

stipsan force-pushed the improve-color-scheme-store-perf branch from 558cd7a to 04c87f4 Compare December 16, 2024 22:11

vercel bot deployed to Preview – performance-studio December 16, 2024 22:11 View deployment

vercel bot deployed to Preview – test-studio December 16, 2024 22:12 View deployment

vercel bot deployed to Preview – page-building-studio December 16, 2024 22:12 View deployment

vercel bot deployed to Preview – test-next-studio December 16, 2024 22:14 View deployment

rexxars approved these changes Dec 16, 2024

View reviewed changes

stipsan added this pull request to the merge queue Dec 16, 2024

Merged via the queue into next with commit ed3551b Dec 16, 2024
57 checks passed

stipsan deleted the improve-color-scheme-store-perf branch December 16, 2024 22:33

stipsan added a commit that referenced this pull request Dec 18, 2024

fix: improve color scheme store perf (#8059)

7b600c4

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: improve color scheme store perf #8059

fix: improve color scheme store perf #8059

stipsan commented Dec 13, 2024 •

edited

Loading

vercel bot commented Dec 13, 2024 •

edited

Loading

github-actions bot commented Dec 13, 2024

github-actions bot commented Dec 13, 2024 •

edited

Loading

github-actions bot commented Dec 13, 2024 •

edited

Loading

🏠 Reference result

🧪 Experiment result

📚 Glossary

column definitions

stipsan Dec 16, 2024

fix: improve color scheme store perf #8059

fix: improve color scheme store perf #8059

Conversation

stipsan commented Dec 13, 2024 • edited Loading

Description

What to review

Testing

Notes for release

vercel bot commented Dec 13, 2024 • edited Loading

github-actions bot commented Dec 13, 2024

github-actions bot commented Dec 13, 2024 • edited Loading

github-actions bot commented Dec 13, 2024 • edited Loading

⚡️ Editor Performance Report

🏠 Reference result

🧪 Experiment result

📚 Glossary

column definitions

stipsan Dec 16, 2024

Choose a reason for hiding this comment

stipsan commented Dec 13, 2024 •

edited

Loading

vercel bot commented Dec 13, 2024 •

edited

Loading

github-actions bot commented Dec 13, 2024 •

edited

Loading

github-actions bot commented Dec 13, 2024 •

edited

Loading