feat: add displayTimezone option to datetime input

[EoinFalconer]

Description

Adding the ability to add a displayTimezone option to the datetime input. This allows you to specify the timezone in which the stored UTC string from content lake will be displayed. When enabled, a tooltip is shown at the bottom left of the input field which indicates the timezone the field is representing. When you start editing this disappears.

A common use case here could be anything local that you would be working on in another timezone, for example concert times, apartment viewing times etc. etc. which are hard to work with today as the studio (just like the Date API) respects only the browsers relative display of the UTC string.

We have lots of signal on this one in this thread, as well as directly from users.

In addition to this, I decided to give it a go of removing moment from the @sanity/util package as a testbed how we should go about removing it across the entire codebase.

I am using the new date-fns/tz and date-fns/utc packages from date-fns. The reason for these is that they are very lightweight, TZDateMini which I am using here is only 916 B, which is a whopper difference from the locale bloat from moment-timezone dep we would need to make this work with moment.

As we have the ability to add custom date formats via the options on the datetime input and this is documented as support moment.js formats, I decided to write a formatter that would use the Intl.DateTimeFormat.format functionality instead by mapping the moment formatting to that format object.

What to review

• The naming of displayTimezone is worth a discussion.
• The UI that I have chosen, with the text below should also be taken into consideration as to whether that is the best approach.
• Browser support, not baking locales and timezones into the package and instead relying on the Intl.DateTimeFormat browser API means that browser versions outside the widely supported will not work.

Testing

I added two tests where I thought they should go that take account for this being in place and for Winter and Summer timezones. Happy to add more should we sit fit!

Notes for release

Might actually be worth mentioning: "The ability to specify the display timezone for your datetime fields".

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

2 Skipped Deployments

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

[github-actions]

No changes to documentation

[github-actions]

Component Testing Report Updated Jan 9, 2025 9:20 PM (UTC)

✅ All Tests Passed -- expand for details

File	Status	Duration	Passed	Skipped	Failed
comments/CommentInput.spec.tsx	✅ Passed (Inspect)	1m 3s	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)	50s	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)	26s	6	0	0
formBuilder/inputs/PortableText/FocusTracking.spec.tsx	✅ Passed (Inspect)	1m 6s	15	0	0
formBuilder/inputs/PortableText/Input.spec.tsx	✅ Passed (Inspect)	1m 28s	21	0	0
formBuilder/inputs/PortableText/ObjectBlock.spec.tsx	✅ Passed (Inspect)	1m 40s	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 43s	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 Thu, 09 Jan 2025 21:18:25 GMT

Benchmark	reference latency of sanity@latest	experiment latency of this branch	Δ (%) latency difference
article (title)	24.1 efps (42ms)	22.2 efps (45ms)	+4ms (+8.4%)	✅
article (body)	46.2 efps (22ms)	44.1 efps (23ms)	+1ms (+4.8%)	✅
article (string inside object)	24.7 efps (41ms)	25.6 efps (39ms)	-2ms (-3.7%)	✅
article (string inside array)	20.8 efps (48ms)	21.7 efps (46ms)	-2ms (-4.2%)	✅
recipe (name)	52.6 efps (19ms)	47.6 efps (21ms)	+2ms (+10.5%)	✅
recipe (description)	50.0 efps (20ms)	50.0 efps (20ms)	+0ms (-/-%)	✅
recipe (instructions)	99.9+ efps (7ms)	99.9+ efps (7ms)	+0ms (-/-%)	✅
synthetic (title)	18.9 efps (53ms)	19.6 efps (51ms)	-2ms (-3.8%)	✅
synthetic (string inside object)	19.2 efps (52ms)	19.8 efps (51ms)	-2ms (-2.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)	42ms	46ms	68ms	422ms	754ms	11.0s
article (body)	22ms	28ms	44ms	119ms	358ms	6.3s
article (string inside object)	41ms	42ms	44ms	60ms	167ms	6.9s
article (string inside array)	48ms	49ms	57ms	268ms	453ms	7.8s
recipe (name)	19ms	22ms	25ms	44ms	0ms	7.6s
recipe (description)	20ms	21ms	25ms	40ms	0ms	4.8s
recipe (instructions)	7ms	9ms	11ms	12ms	0ms	3.3s
synthetic (title)	53ms	58ms	63ms	146ms	702ms	12.6s
synthetic (string inside object)	52ms	55ms	65ms	513ms	1157ms	8.4s

🧪 Experiment result

The performance result of this branch

Benchmark	latency	p75	p90	p99	blocking time	test duration
article (title)	45ms	66ms	79ms	492ms	853ms	11.6s
article (body)	23ms	25ms	28ms	94ms	111ms	6.0s
article (string inside object)	39ms	42ms	45ms	212ms	249ms	6.8s
article (string inside array)	46ms	48ms	52ms	162ms	207ms	7.2s
recipe (name)	21ms	24ms	25ms	42ms	0ms	7.5s
recipe (description)	20ms	22ms	23ms	38ms	3ms	4.9s
recipe (instructions)	7ms	9ms	11ms	33ms	0ms	3.3s
synthetic (title)	51ms	54ms	58ms	245ms	666ms	12.8s
synthetic (string inside object)	51ms	54ms	65ms	551ms	1127ms	8.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.