Skip to content

feat: animated dev build/render indicator #74833

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 1 commit into from
Jan 14, 2025
Merged

feat: animated dev build/render indicator #74833

merged 1 commit into from
Jan 14, 2025

Conversation

gaojude
Copy link
Contributor

@gaojude gaojude commented Jan 13, 2025 •
edited
Loading

Note: This is part of the new dev overlay initiative, so it's only enabled when the new overlay experience is turned on.

There are two kinds of loading states, namely, build and render.

  • you will see the build indicator when you make a client navigation that has not been built to a new route OR during an HMR update
  • you will see the render indicator while React processes the router transition -- callout: we currently only support render status in App Router

Here is a quick demo of what it looks like - you will see that the build is using a more muted colour than render:

🎥 Video uploaded on Graphite:

Note on implementation detail:

We previously had a mechanism to surface the build status. We extended that mechanism to display the status in the new indicator UI without adding new HMR event bindings. Since the render status is a new requirement and specific to the new overlay, it is directly coupled with the overlay and plumbed separately from the build status.

@ijjk ijjk added created-by: Next.js team PRs by the Next.js team. type: next labels Jan 13, 2025
@gaojude Graphite App
Copy link
Contributor Author

gaojude commented Jan 13, 2025

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

@gaojude gaojude changed the title good progress feat: animated loading indicator Jan 13, 2025
@gaojude gaojude marked this pull request as ready for review January 13, 2025 19:40
@gaojude gaojude force-pushed the jude/build-and-render-indicator branch from 3c99519 to bdcb6b9 Compare January 13, 2025 19:54
@gaojude gaojude changed the title feat: animated loading indicator feat: animated dev build/render indicator Jan 13, 2025
@ijjk
Copy link
Member

ijjk commented Jan 13, 2025 •
edited
Loading

Stats from current PR

Default Build (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary vercel/next.js jude/build-and-render-indicator Change
buildDuration 29.1s 27.3s N/A
buildDurationCached 25.1s 22.3s N/A
nodeModulesSize 417 MB 417 MB ⚠️ +195 kB
nextStartRea..uration (ms) 912ms 851ms N/A
Client Bundles (main, webpack)
vercel/next.js canary vercel/next.js jude/build-and-render-indicator Change
5306-HASH.js gzip 53.3 kB 53.4 kB N/A
8276.HASH.js gzip 169 B 168 B N/A
8377-HASH.js gzip 5.44 kB 5.44 kB N/A
bccd1874-HASH.js gzip 52.9 kB 52.9 kB N/A
framework-HASH.js gzip 57.5 kB 57.5 kB N/A
main-app-HASH.js gzip 240 B 242 B N/A
main-HASH.js gzip 34.2 kB 34.2 kB N/A
webpack-HASH.js gzip 1.71 kB 1.71 kB N/A
Overall change 0 B 0 B ✓
Legacy Client Bundles (polyfills)
vercel/next.js canary vercel/next.js jude/build-and-render-indicator 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/build-and-render-indicator 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.57 kB 4.57 kB N/A
index-HASH.js gzip 268 B 268 B ✓
link-HASH.js gzip 2.35 kB 2.34 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/build-and-render-indicator Change
_buildManifest.js gzip 749 B 747 B N/A
Overall change 0 B 0 B ✓
Rendered Page Sizes
vercel/next.js canary vercel/next.js jude/build-and-render-indicator Change
index.html gzip 524 B 524 B ✓
link.html gzip 539 B 538 B N/A
withRouter.html gzip 520 B 520 B ✓
Overall change 1.04 kB 1.04 kB ✓
Edge SSR bundle Size
vercel/next.js canary vercel/next.js jude/build-and-render-indicator Change
edge-ssr.js gzip 129 kB 129 kB N/A
page.js gzip 207 kB 207 kB N/A
Overall change 0 B 0 B ✓
Middleware size
vercel/next.js canary vercel/next.js jude/build-and-render-indicator Change
middleware-b..fest.js gzip 671 B 668 B N/A
middleware-r..fest.js gzip 155 B 156 B N/A
middleware.js gzip 31.2 kB 31.2 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/build-and-render-indicator 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 369 kB 371 kB ⚠️ +2.49 kB
app-page-exp..prod.js gzip 130 kB 130 kB N/A
app-page-tur..prod.js gzip 142 kB 142 kB N/A
app-page-tur..prod.js gzip 138 kB 138 kB N/A
app-page.run...dev.js gzip 357 kB 359 kB ⚠️ +2.5 kB
app-page.run..prod.js gzip 126 kB 126 kB N/A
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.7 kB 21.7 kB ✓
pages.runtim...dev.js gzip 27.5 kB 27.5 kB ✓
pages.runtim..prod.js gzip 21.7 kB 21.7 kB ✓
server.runti..prod.js gzip 916 kB 916 kB ✓
Overall change 1.92 MB 1.93 MB ⚠️ +5 kB
build cache Overall increase ⚠️
vercel/next.js canary vercel/next.js jude/build-and-render-indicator Change
0.pack gzip 2.1 MB 2.09 MB N/A
index.pack gzip 75.7 kB 75.8 kB ⚠️ +130 B
Overall change 75.7 kB 75.8 kB ⚠️ +130 B
Diff details
Diff for 5306-HASH.js

Diff too large to display

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-exp..time.prod.js

Diff too large to display

Diff for app-page-tur..time.prod.js

Diff too large to display

Diff for app-page-tur..time.prod.js

Diff too large to display

Diff for app-page.runtime.dev.js 
failed to diff
Diff for app-page.runtime.prod.js

Diff too large to display

Commit: d12fcea

@ijjk
Copy link
Member

ijjk commented Jan 13, 2025 •
edited
Loading

Tests Passed

ztanner
ztanner reviewed Jan 13, 2025
View reviewed changes
...overlay/_experimental/internal/components/Errors/dev-tools-indicator/dev-tools-indicator.tsx
Comment on lines +66 to +67
isDevBuilding={isDevBuilding}
isDevRendering={isDevRendering}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

as far as the logo is concerned it's only ever rendering or building, so I'm wondering if this should be combined into a single enum state? e.g. IDLE | BUILDING | RENDERING

Copy link
Contributor Author

@gaojude gaojude Jan 13, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thinking it through, passing two separate props makes sense because:

  1. Four Possible States: Technically, there are four states (building on/off × rendering on/off). Since dev building and rendering are independent, the Logo component needs to decide how to handle conflicting states (e.g., both building and rendering happening simultaneously). I want that logic to be delegated to Logo instead of preprocessing it beforehand.

  2. Component Behavior: The Logo is already a “smart” component—it includes logic like a 200ms debounce. This makes it more than just a dummy presentational component. Hence, adding a bit more logic to handle multiple states is more consistent with its current responsibilities. (The reason we pass rendering and building props rather than having Logo manage these internally via hooks is to allow flexibility for overrides, such as in Storybook.)

@gaojude gaojude force-pushed the jude/build-and-render-indicator branch from bdcb6b9 to d12fcea Compare January 13, 2025 22:38
@gaojude gaojude merged commit 92e3200 into canary Jan 14, 2025
130 checks passed
@gaojude gaojude deleted the jude/build-and-render-indicator branch January 14, 2025 13:16
@gaojude gaojude mentioned this pull request Jan 14, 2025
Merged
gaojude added a commit that referenced this pull request Jan 14, 2025
@gaojude
Refine NextLogo Accessibility and Styling (#74869)
019afc3 
This PR addresses the following issues and improvements:

1.	Apply a style reset to Storybook for consistency.

2.	Update NextLogo element from div to button to improve accessibility.

3.	Add a press effect to shrink NextLogo for better interactivity.

4. Ensure the pointer cursor is consistent across the entire NextLogo
area.

5.	Add a box shadow to NextLogo for improved visual depth.

6.	Optimize animation by refining speed and sequence.

7. Replace hardcoded colors with CSS variables to enable dark mode
support.

8.	Fix overflow issues with effects.

9.	Resolve black background overflow problem.

10.	Enhance SVG anti-aliasing for a cleaner appearance.

11. Center the logo by moving it to the right by 1 pixel. 

This PR serves as a fast-follow to
#74833
@github-actions github-actions bot locked as resolved and limited conversation to collaborators Jan 29, 2025
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@ztanner ztanner ztanner left review comments

@huozhi huozhi huozhi approved these changes

@devjiwonchoi devjiwonchoi devjiwonchoi approved these changes

Assignees
No one assigned
Labels
created-by: Next.js team PRs by the Next.js team. locked type: next
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
5 participants
@gaojude @ijjk @ztanner @huozhi @devjiwonchoi