polish indicator loading behaviour for new dev overlay

[gaojude]

Previously, we delayed showing the loading state for 200 ms to avoid brief and jarring visual changes (“flashing”) for short loading durations. However, this approach had two significant drawbacks:

1. Longer loading times felt unresponsive because users wouldn’t see immediate feedback.
2. Very quick loading gave the impression that the loading functionality was broken since no loading state appeared.

To address these issues, we’ve updated the behavior so that the loading state appears immediately when an action begins. Instead of enforcing a strict 200 ms minimum, we now ensure that once loading starts, it remains active until reaching the next multiple of 750 ms. This has the dual benefit of:

1. Eliminating artificial delays for longer loads, since the loading indicator appears right away.
2. Preventing flashing for quick loads (under 750 ms), by continuing the loading state until the 750 ms mark (or 1500 ms mark, etc.).

We chose 750 ms because our loading animation itself lasts 750 ms; if we stopped the animation in the middle, it would feel abrupt or unsmooth. By keeping the loading state for at least one full animation cycle (or a multiple thereof), the experience remains consistent and visually polished.

Overall, this update ensures a more responsive and predictable user experience across both short and long loading times.

Before
https://github.com/user-attachments/assets/462b231f-81e1-4b23-a130-2d79364750f3

After
https://github.com/user-attachments/assets/9b3eaa65-81bf-43fb-bae6-16494fa36507

Closes: NDX-702

[gaojude]

• polish indicator loading behaviour for new dev overlay #75149 👈 (View in Graphite)
• canary

This stack of pull requests is managed by Graphite. Learn more about stacking.

[ijjk]

Stats from current PR

Default Build (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js jude/logo-animation	Change
buildDuration	17.4s	15.6s	N/A
buildDurationCached	14.6s	12.4s	N/A
nodeModulesSize	418 MB	418 MB	⚠️ +41.1 kB
nextStartRea..uration (ms)	398ms	396ms	N/A

Client Bundles (main, webpack)

	vercel/next.js canary	vercel/next.js jude/logo-animation	Change
5306-HASH.js gzip	54 kB	54 kB	N/A
8276.HASH.js gzip	169 B	168 B	N/A
8377-HASH.js gzip	5.46 kB	5.46 kB	N/A
bccd1874-HASH.js gzip	52.9 kB	52.9 kB	✓
framework-HASH.js gzip	57.5 kB	57.5 kB	N/A
main-app-HASH.js gzip	240 B	243 B	N/A
main-HASH.js gzip	34.4 kB	34.4 kB	N/A
webpack-HASH.js gzip	1.71 kB	1.71 kB	N/A
Overall change	52.9 kB	52.9 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js jude/logo-animation	Change
polyfills-HASH.js gzip	39.4 kB	39.4 kB	✓
Overall change	39.4 kB	39.4 kB	✓

Client Pages

	vercel/next.js canary	vercel/next.js jude/logo-animation	Change
_app-HASH.js gzip	193 B	193 B	✓
_error-HASH.js gzip	193 B	193 B	✓
amp-HASH.js gzip	512 B	510 B	N/A
css-HASH.js gzip	343 B	342 B	N/A
dynamic-HASH.js gzip	1.84 kB	1.84 kB	✓
edge-ssr-HASH.js gzip	265 B	265 B	✓
head-HASH.js gzip	363 B	362 B	N/A
hooks-HASH.js gzip	393 B	392 B	N/A
image-HASH.js gzip	4.59 kB	4.58 kB	N/A
index-HASH.js gzip	268 B	268 B	✓
link-HASH.js gzip	2.35 kB	2.35 kB	N/A
routerDirect..HASH.js gzip	328 B	328 B	✓
script-HASH.js gzip	397 B	397 B	✓
withRouter-HASH.js gzip	323 B	326 B	N/A
1afbb74e6ecf..834.css gzip	106 B	106 B	✓
Overall change	3.59 kB	3.59 kB	✓

Client Build Manifests

	vercel/next.js canary	vercel/next.js jude/logo-animation	Change
_buildManifest.js gzip	748 B	747 B	N/A
Overall change	0 B	0 B	✓

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js jude/logo-animation	Change
index.html gzip	523 B	523 B	✓
link.html gzip	538 B	538 B	✓
withRouter.html gzip	519 B	520 B	N/A
Overall change	1.06 kB	1.06 kB	✓

Edge SSR bundle Size

	vercel/next.js canary	vercel/next.js jude/logo-animation	Change
edge-ssr.js gzip	129 kB	129 kB	N/A
page.js gzip	208 kB	208 kB	N/A
Overall change	0 B	0 B	✓

Middleware size

	vercel/next.js canary	vercel/next.js jude/logo-animation	Change
middleware-b..fest.js gzip	669 B	664 B	N/A
middleware-r..fest.js gzip	155 B	156 B	N/A
middleware.js gzip	31.3 kB	31.3 kB	N/A
edge-runtime..pack.js gzip	844 B	844 B	✓
Overall change	844 B	844 B	✓

Next Runtimes Overall increase ⚠️

	vercel/next.js canary	vercel/next.js jude/logo-animation	Change
274-experime...dev.js gzip	322 B	322 B	✓
274.runtime.dev.js gzip	314 B	314 B	✓
app-page-exp...dev.js gzip	375 kB	375 kB	⚠️ +153 B
app-page-exp..prod.js gzip	130 kB	130 kB	✓
app-page-tur..prod.js gzip	143 kB	143 kB	✓
app-page-tur..prod.js gzip	139 kB	139 kB	✓
app-page.run...dev.js gzip	363 kB	363 kB	⚠️ +157 B
app-page.run..prod.js gzip	126 kB	126 kB	✓
app-route-ex...dev.js gzip	37.6 kB	37.6 kB	✓
app-route-ex..prod.js gzip	25.6 kB	25.6 kB	✓
app-route-tu..prod.js gzip	25.6 kB	25.6 kB	✓
app-route-tu..prod.js gzip	25.4 kB	25.4 kB	✓
app-route.ru...dev.js gzip	39.2 kB	39.2 kB	✓
app-route.ru..prod.js gzip	25.4 kB	25.4 kB	✓
pages-api-tu..prod.js gzip	9.69 kB	9.69 kB	✓
pages-api.ru...dev.js gzip	11.6 kB	11.6 kB	✓
pages-api.ru..prod.js gzip	9.68 kB	9.68 kB	✓
pages-turbo...prod.js gzip	21.9 kB	21.9 kB	✓
pages.runtim...dev.js gzip	27.7 kB	27.7 kB	✓
pages.runtim..prod.js gzip	21.9 kB	21.9 kB	✓
server.runti..prod.js gzip	916 kB	916 kB	✓
Overall change	2.47 MB	2.47 MB	⚠️ +310 B

build cache Overall increase ⚠️

	vercel/next.js canary	vercel/next.js jude/logo-animation	Change
0.pack gzip	2.1 MB	2.1 MB	⚠️ +1.12 kB
index.pack gzip	74.7 kB	74.6 kB	N/A
Overall change	2.1 MB	2.1 MB	⚠️ +1.12 kB

Diff details

Diff for main-HASH.js

Diff too large to display

Diff for app-page-exp..ntime.dev.js

failed to diff

Diff for app-page.runtime.dev.js

failed to diff

Commit: 85032f9

[ijjk]

Tests Passed