fix(core): portable text annotations slow to show #7588

pedrobonamin · 2024-10-04T11:30:06Z

Description

Adding an annotation inside the PTE editor is perceived as slow, this is mainly because the annotation needs the annotation value to exist in the form value before being able to show the Popover for it.
Also:

The Add comment button reappears in place of the annotation after clicking "add annotation."
The annotation edit/discard toolbar appears before the annotation popover renders.
The annotation in PTE changes its style before the annotation popover renders.
The popover takes about 1 second to render after clicking and doesn't focus.

Comments Input:

Added a blurred state to track when the editor loses focus, preventing immediate comment input display upon regaining focus (CommentsPortableTextInput.tsx).

Annotation:

Introduced isReady state to ensure the annotation toolbar popover is only rendered when children are present , this means that the member exists. (Annotation.tsx).

Focus in Popover Modal:

Implemented an effect to automatically focus the first input element when the popover modal content is rendered (PopoverModal.tsx).

Note

Upcoming changes:
The portable text editor package will be update to not debounce the addAnnotation action

Screen.Recording.2024-10-04.at.13.25.27.mov

What to review

Are this changes correct?
Is there any oversight to fix?

Testing

Visit a PTE field in the studio, add an annotation, the toolbar and comments button should not show. The first input should be focused once annotations render.
https://test-next-studio-git-pte-annotations.sanity.dev/test/structure/input-standard;portable-text;pt_allTheBellsAndWhistles;834d6ed4-7cb1-47b9-a533-a734e0f78693

Notes for release

Update annotations creations in portable text, autofocus on the first input.

vercel · 2024-10-04T11:30:10Z

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

1 Skipped Deployment

Name	Status	Preview	Comments	Updated (UTC)
studio-workshop	⬜️ Ignored (Inspect)	Visit Preview		Nov 7, 2024 8:03am

github-actions · 2024-10-04T11:33:23Z

No changes to documentation

github-actions · 2024-10-04T11:45:11Z

Component Testing Report Updated Nov 7, 2024 7:59 AM (UTC)

✅ All Tests Passed -- expand for details

File	Status	Duration	Passed	Skipped
comments/CommentInput.spec.tsx	✅ Passed (Inspect)	45s	15	0
formBuilder/ArrayInput.spec.tsx	✅ Passed (Inspect)	8s	3	0
formBuilder/inputs/PortableText/Annotations.spec.tsx	✅ Passed (Inspect)	32s	6	0
formBuilder/inputs/PortableText/copyPaste/CopyPaste.spec.tsx	✅ Passed (Inspect)	39s	11	7
formBuilder/inputs/PortableText/copyPaste/CopyPasteFields.spec.tsx	✅ Passed (Inspect)	0s	0	12
formBuilder/inputs/PortableText/Decorators.spec.tsx	✅ Passed (Inspect)	18s	6	0
formBuilder/inputs/PortableText/DisableFocusAndUnset.spec.tsx	✅ Passed (Inspect)	10s	3	0
formBuilder/inputs/PortableText/DragAndDrop.spec.tsx	✅ Passed (Inspect)	2m 33s	1	0
formBuilder/inputs/PortableText/FocusTracking.spec.tsx	✅ Passed (Inspect)	46s	15	0
formBuilder/inputs/PortableText/Input.spec.tsx	✅ Passed (Inspect)	1m 41s	21	0
formBuilder/inputs/PortableText/ObjectBlock.spec.tsx	✅ Passed (Inspect)	1m 18s	18	0
formBuilder/inputs/PortableText/PresenceCursors.spec.tsx	✅ Passed (Inspect)	9s	3	9
formBuilder/inputs/PortableText/RangeDecoration.spec.tsx	✅ Passed (Inspect)	27s	9	0
formBuilder/inputs/PortableText/Styles.spec.tsx	✅ Passed (Inspect)	18s	6	0
formBuilder/inputs/PortableText/Toolbar.spec.tsx	✅ Passed (Inspect)	37s	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-10-04T11:50:52Z

⚡️ Editor Performance Report

Updated Thu, 07 Nov 2024 08:02:11 GMT

Benchmark	reference ^{latency of sanity@latest}	experiment ^{latency of this branch}	Δ (%) ^{latency difference}
article (title)	15.9 efps (63ms)	16.7 efps (60ms)	-3ms (-4.8%)	✅
article (body)	59.9 efps (17ms)	59.5 efps (17ms)	+0ms (+0.6%)	✅
article (string inside object)	18.9 efps (53ms)	17.9 efps (56ms)	+3ms (+5.7%)	✅
article (string inside array)	16.3 efps (62ms)	15.7 efps (64ms)	+2ms (+3.3%)	✅
recipe (name)	31.3 efps (32ms)	30.3 efps (33ms)	+1ms (+3.1%)	✅
recipe (description)	34.5 efps (29ms)	34.5 efps (29ms)	+0ms (-/-%)	✅
recipe (instructions)	99.9+ efps (6ms)	99.9+ efps (6ms)	+0ms (-/-%)	✅
synthetic (title)	14.7 efps (68ms)	15.2 efps (66ms)	-2ms (-2.9%)	✅
synthetic (string inside object)	15.7 efps (64ms)	15.9 efps (63ms)	-1ms (-0.8%)	✅

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)	63ms	67ms	82ms	321ms	711ms	14.5s
article (body)	17ms	19ms	32ms	75ms	170ms	5.6s
article (string inside object)	53ms	57ms	65ms	189ms	412ms	8.7s
article (string inside array)	62ms	68ms	97ms	133ms	829ms	9.4s
recipe (name)	32ms	35ms	42ms	87ms	7ms	9.7s
recipe (description)	29ms	31ms	35ms	89ms	0ms	5.9s
recipe (instructions)	6ms	8ms	9ms	34ms	0ms	3.2s
synthetic (title)	68ms	73ms	86ms	470ms	1733ms	16.1s
synthetic (string inside object)	64ms	67ms	75ms	154ms	1229ms	10.1s

🧪 Experiment result

The performance result of this branch

Benchmark	latency	p75	p90	p99	blocking time	test duration
article (title)	60ms	65ms	67ms	192ms	433ms	14.8s
article (body)	17ms	19ms	24ms	99ms	264ms	6.1s
article (string inside object)	56ms	60ms	87ms	225ms	539ms	8.8s
article (string inside array)	64ms	71ms	77ms	128ms	934ms	9.6s
recipe (name)	33ms	35ms	42ms	70ms	8ms	9.7s
recipe (description)	29ms	31ms	36ms	151ms	7ms	6.1s
recipe (instructions)	6ms	8ms	10ms	11ms	0ms	3.2s
synthetic (title)	66ms	70ms	82ms	336ms	1402ms	15.1s
synthetic (string inside object)	63ms	67ms	75ms	489ms	1433ms	9.6s

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

…add comment button

RitaDias

As always, fantastic work and great pr description :)

ricokahler force-pushed the next branch from f1f9c51 to 92de3d9 Compare October 4, 2024 20:16

pedrobonamin force-pushed the pte-annotations branch from 4f918e7 to 18efbe9 Compare October 7, 2024 08:56

vercel bot deployed to Preview – page-building-studio October 7, 2024 08:59 View deployment

vercel bot deployed to Preview – performance-studio October 7, 2024 08:59 View deployment

vercel bot deployed to Preview – test-studio October 7, 2024 09:00 View deployment

vercel bot deployed to Preview – test-next-studio October 7, 2024 09:04 View deployment

vercel bot deployed to Preview – test-compiled-studio October 7, 2024 09:07 View deployment

pedrobonamin added 3 commits November 7, 2024 08:51

fix(core): hide annotation toolbar when inserting a new annotation

04bb2d0

fix(core): wait for new selection when pte restore focus to show the …

bfbed66

…add comment button

fix(core): focus annotation popover first input

782f0bc

pedrobonamin force-pushed the pte-annotations branch from 18efbe9 to 782f0bc Compare November 7, 2024 07:51

pedrobonamin marked this pull request as ready for review November 7, 2024 07:51

vercel bot deployed to Preview – performance-studio November 7, 2024 07:55 View deployment

vercel bot deployed to Preview – page-building-studio November 7, 2024 07:55 View deployment

vercel bot deployed to Preview – test-studio November 7, 2024 07:55 View deployment

vercel bot deployed to Preview – test-next-studio November 7, 2024 08:00 View deployment

vercel bot deployed to Preview – test-compiled-studio November 7, 2024 08:03 View deployment

juice49 requested a review from a team as a code owner November 22, 2024 11:56

juice49 requested review from RitaDias and removed request for a team November 22, 2024 11:56

RitaDias approved these changes Nov 25, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(core): portable text annotations slow to show #7588

fix(core): portable text annotations slow to show #7588

pedrobonamin commented Oct 4, 2024 •

edited

Loading

vercel bot commented Oct 4, 2024 •

edited

Loading

github-actions bot commented Oct 4, 2024

github-actions bot commented Oct 4, 2024 •

edited

Loading

github-actions bot commented Oct 4, 2024 •

edited

Loading

🏠 Reference result

🧪 Experiment result

📚 Glossary

column definitions

RitaDias left a comment

fix(core): portable text annotations slow to show #7588

Are you sure you want to change the base?

fix(core): portable text annotations slow to show #7588

Conversation

pedrobonamin commented Oct 4, 2024 • edited Loading

Description

What to review

Testing

Notes for release

vercel bot commented Oct 4, 2024 • edited Loading

github-actions bot commented Oct 4, 2024

github-actions bot commented Oct 4, 2024 • edited Loading

github-actions bot commented Oct 4, 2024 • edited Loading

⚡️ Editor Performance Report

🏠 Reference result

🧪 Experiment result

📚 Glossary

column definitions

RitaDias left a comment

Choose a reason for hiding this comment

pedrobonamin commented Oct 4, 2024 •

edited

Loading

vercel bot commented Oct 4, 2024 •

edited

Loading

github-actions bot commented Oct 4, 2024 •

edited

Loading

github-actions bot commented Oct 4, 2024 •

edited

Loading