mirror of
https://github.com/hanzoai/next.js.git
synced 2026-09-24 17:00:51 +00:00
raunoandGitHub
0704818681
The current animation strategy for our Dev Tools surface does not work. https://github.com/user-attachments/assets/a0ca5459-9d5a-4d90-af00-b071d43581e0 On page load, several animations can be observed: - Width growth from `0` → `auto` - Issue count translates and fades, along with the plural `s` suffix - A subtle scale bounce effect plays All these animations are state transitions, and thus we should ignore them completely on page load or on high-frequency updates where animating is undesirable, e.g. sometimes `issueCount` will receive updates faster than the animation can run. This PR implements checks to guard the animations from being executed on page load, _and only_ during state transitions. To review, it is worth checking out the [/animation-test](https://github.com/vercel/next.js/blob/a6e6fe635b712020d4ea2d027040d838eb5941c6/test/development/app-dir/hydration-error-count/app/animation-test/page.tsx) fixture I've set up in this PR. After these changes, the experience is as follows—no animations on page load, but only on subsequent low-frequency updates (count change, or collapse of the surface): https://github.com/user-attachments/assets/7b2d5e0d-64ec-4165-b5e2-85489bd00a2c _Note: I am not using Storybook for a page load reference, the apps under `test/development/app-dir/*` are more reliable._
36 lines
1.1 KiB
TypeScript
36 lines
1.1 KiB
TypeScript
'use client'
|
||
|
||
import { useEffect } from 'react'
|
||
|
||
/**
|
||
* This page is to verify that the Dev Tools surface animates as expected and without jank:
|
||
*
|
||
* 1. When the page loads with "1 Issue" present,
|
||
* no animations should trigger (count change, width growth, etc.).
|
||
* The surface should assume its intrinsic position immediately,
|
||
* while still animating when collapsed from (×).
|
||
*
|
||
* 2. When multiple errors come in with little delay inbetween them,
|
||
* the count _should not_ animate when it changes because it will
|
||
* look janky when the `deltaMs` between changes is less than the `animationDurationMs`.
|
||
*
|
||
* 3. When another error comes in, and `deltaMs` is greater, the surface should
|
||
* subtly bounce and animate the count.
|
||
*/
|
||
|
||
// Play with this between `1` and `2`
|
||
// to make sure the surface doesn't animate the plural form (s)
|
||
const ERROR_COUNT = 2
|
||
|
||
export default function Page() {
|
||
const clx = typeof window === 'undefined' ? 'server' : 'client'
|
||
|
||
useEffect(() => {
|
||
setTimeout(() => {
|
||
throw new Error('runtime error')
|
||
}, 2000)
|
||
}, [])
|
||
|
||
return <p className={clx}>{ERROR_COUNT >= 2 && <p>hey</p>}</p>
|
||
}
|