feat: animated dev build/render indicator (#74833)
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`:
<div class='graphite__hidden'>
<div>🎥 Video uploaded on Graphite:</div>
<a
href="https://app.graphite.dev/media/video/rKSEEwxbNzdFs9t0yyxN/b0b48adf-01d1-4ac9-a747-9f5808cfa929.mp4">
<img
src="https://app.graphite.dev/api/v1/graphite/video/thumbnail/rKSEEwxbNzdFs9t0yyxN/b0b48adf-01d1-4ac9-a747-9f5808cfa929.mp4">
</a>
</div>
<video
src="https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/rKSEEwxbNzdFs9t0yyxN/b0b48adf-01d1-4ac9-a747-9f5808cfa929.mp4">CleanShot
2025-01-13 at 14.24.28.mp4</video>
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.
