chore(core): add <AvatarSkeleton /> component

[pedrobonamin]

Description

This PR adds a reusable AvatarSkeleton component, which is useful to display in loading states when using the UserAvatar component.

Usage example:

Screen.Recording.2025-01-13.at.16.09.05.mov

What to review

Testing

Notes for release

chore(core): adds reusable AvatarSkeleton component

[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	Jan 13, 2025 3:23pm
performance-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 13, 2025 3:23pm
test-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 13, 2025 3:23pm

2 Skipped Deployments

Name	Status	Preview	Comments	Updated (UTC)
studio-workshop	⬜️ Ignored (Inspect)	Visit Preview		Jan 13, 2025 3:23pm
test-next-studio	⬜️ Ignored (Inspect)			Jan 13, 2025 3:23pm

[github-actions]

No changes to documentation

[github-actions]

Component Testing Report Updated Jan 13, 2025 3:30 PM (UTC)

✅ All Tests Passed -- 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)	12s	3	0	0
formBuilder/inputs/PortableText/Annotations.spec.tsx	✅ Passed (Inspect)	39s	6	0	0
formBuilder/inputs/PortableText/copyPaste/CopyPaste.spec.tsx	✅ Passed (Inspect)	51s	11	7	0
formBuilder/inputs/PortableText/copyPaste/CopyPasteFields.spec.tsx	✅ Passed (Inspect)	0s	0	12	0
formBuilder/inputs/PortableText/Decorators.spec.tsx	✅ Passed (Inspect)	26s	6	0	0
formBuilder/inputs/PortableText/DisableFocusAndUnset.spec.tsx	✅ Passed (Inspect)	14s	3	0	0
formBuilder/inputs/PortableText/DragAndDrop.spec.tsx	✅ Passed (Inspect)	27s	6	0	0
formBuilder/inputs/PortableText/FocusTracking.spec.tsx	✅ Passed (Inspect)	1m 7s	15	0	0
formBuilder/inputs/PortableText/Input.spec.tsx	✅ Passed (Inspect)	1m 29s	21	0	0
formBuilder/inputs/PortableText/ObjectBlock.spec.tsx	✅ Passed (Inspect)	1m 41s	18	0	0
formBuilder/inputs/PortableText/PresenceCursors.spec.tsx	✅ Passed (Inspect)	13s	3	9	0
formBuilder/inputs/PortableText/Styles.spec.tsx	✅ Passed (Inspect)	26s	6	0	0
formBuilder/inputs/PortableText/Toolbar.spec.tsx	✅ Passed (Inspect)	1m 44s	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, 13 Jan 2025 15:33:20 GMT

Benchmark	reference latency of sanity@latest	experiment latency of this branch	Δ (%) latency difference
article (title)	25.0 efps (40ms)	25.6 efps (39ms)	-1ms (-2.5%)	✅
article (body)	67.6 efps (15ms)	73.0 efps (14ms)	-1ms (-/-%)	✅
article (string inside object)	27.4 efps (37ms)	27.0 efps (37ms)	+1ms (+1.4%)	✅
article (string inside array)	24.1 efps (42ms)	22.7 efps (44ms)	+3ms (+6.0%)	✅
recipe (name)	50.0 efps (20ms)	51.3 efps (20ms)	-1ms (-2.5%)	✅
recipe (description)	55.6 efps (18ms)	58.8 efps (17ms)	-1ms (-5.6%)	✅
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)	18.9 efps (53ms)	18.9 efps (53ms)	+0ms (-/-%)	✅

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	48ms	62ms	349ms	349ms	10.2s
article (body)	15ms	17ms	21ms	153ms	219ms	5.4s
article (string inside object)	37ms	38ms	45ms	73ms	123ms	6.4s
article (string inside array)	42ms	44ms	52ms	80ms	242ms	6.9s
recipe (name)	20ms	21ms	22ms	23ms	0ms	7.1s
recipe (description)	18ms	21ms	25ms	36ms	0ms	4.5s
recipe (instructions)	5ms	7ms	11ms	20ms	0ms	3.1s
synthetic (title)	54ms	57ms	66ms	112ms	963ms	13.9s
synthetic (string inside object)	53ms	56ms	67ms	444ms	1224ms	8.6s

🧪 Experiment result

The performance result of this branch

Benchmark	latency	p75	p90	p99	blocking time	test duration
article (title)	39ms	45ms	63ms	459ms	901ms	10.3s
article (body)	14ms	15ms	17ms	154ms	77ms	4.9s
article (string inside object)	37ms	39ms	42ms	148ms	141ms	6.6s
article (string inside array)	44ms	47ms	55ms	188ms	414ms	7.4s
recipe (name)	20ms	22ms	24ms	42ms	0ms	7.5s
recipe (description)	17ms	18ms	20ms	23ms	0ms	4.4s
recipe (instructions)	5ms	6ms	8ms	16ms	0ms	3.0s
synthetic (title)	54ms	56ms	57ms	99ms	428ms	12.2s
synthetic (string inside object)	53ms	56ms	69ms	158ms	1212ms	8.8s

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