[dev-overlay] Move render indicator into Dev Overlay state

Same as for build indicator.
The sync update avoided is especially nice since it
used to happen during navigation where we don't want
to interfere with the update priority.

Author: eps1lon

packages/next/src/client/components/react-dev-overlay/app/app-dev-overlay.tsx

@@ -6,6 +6,7 @@ import {
 import type { GlobalErrorComponent } from '../../global-error'
 
 import { useCallback } from 'react'
+import { createContext } from 'react'
 import { AppDevOverlayErrorBoundary } from './app-dev-overlay-error-boundary'
 import { FontStyles } from '../font/font-styles'
 import { DevOverlay } from '../ui/dev-overlay'
@@ -15,6 +16,10 @@ function getSquashedHydrationErrorDetails() {
   return null
 }
 
+export const AppDevOverlayDispatchContext =
+  createContext<OverlayDispatch | null>(null)
+AppDevOverlayDispatchContext.displayName = 'AppDevOverlayDispatchContext'
+
 export function AppDevOverlay({
   state,
   dispatch,
@@ -31,7 +36,7 @@ export function AppDevOverlay({
   }, [dispatch])
 
   return (
-    <>
+    <AppDevOverlayDispatchContext value={dispatch}>
       <AppDevOverlayErrorBoundary
         globalError={globalError}
         onError={openOverlay}
@@ -47,6 +52,6 @@ export function AppDevOverlay({
           getSquashedHydrationErrorDetails={getSquashedHydrationErrorDetails}
         />
       </>
-    </>
+    </AppDevOverlayDispatchContext>
   )
 }

packages/next/src/client/components/react-dev-overlay/shared.ts

@@ -23,6 +23,7 @@ export interface OverlayState {
   versionInfo: VersionInfo
   notFound: boolean
   buildingIndicator: boolean
+  renderingIndicator: boolean
   staticIndicator: boolean
   showIndicator: boolean
   disableDevIndicator: boolean
@@ -47,6 +48,8 @@ export const ACTION_ERROR_OVERLAY_CLOSE = 'error-overlay-close'
 export const ACTION_ERROR_OVERLAY_TOGGLE = 'error-overlay-toggle'
 export const ACTION_BUILDING_INDICATOR_SHOW = 'building-indicator-show'
 export const ACTION_BUILDING_INDICATOR_HIDE = 'building-indicator-hide'
+export const ACTION_RENDERING_INDICATOR_SHOW = 'rendering-indicator-show'
+export const ACTION_RENDERING_INDICATOR_HIDE = 'rendering-indicator-hide'
 
 export const STORAGE_KEY_THEME = '__nextjs-dev-tools-theme'
 export const STORAGE_KEY_POSITION = '__nextjs-dev-tools-position'
@@ -112,6 +115,13 @@ export interface BuildingIndicatorHideAction {
   type: typeof ACTION_BUILDING_INDICATOR_HIDE
 }
 
+export interface RenderingIndicatorShowAction {
+  type: typeof ACTION_RENDERING_INDICATOR_SHOW
+}
+export interface RenderingIndicatorHideAction {
+  type: typeof ACTION_RENDERING_INDICATOR_HIDE
+}
+
 export type BusEvent =
   | BuildOkAction
   | BuildErrorAction
@@ -128,6 +138,8 @@ export type BusEvent =
   | ErrorOverlayToggleAction
   | BuildingIndicatorShowAction
   | BuildingIndicatorHideAction
+  | RenderingIndicatorShowAction
+  | RenderingIndicatorHideAction
 
 const REACT_ERROR_STACK_BOTTOM_FRAME_REGEX =
   // 1st group: v8
@@ -153,6 +165,7 @@ export const INITIAL_OVERLAY_STATE: Omit<
   buildError: null,
   errors: [],
   notFound: false,
+  renderingIndicator: false,
   staticIndicator: false,
   /* 
     This is set to `true` when we can reliably know

packages/next/src/client/components/react-dev-overlay/ui/components/errors/dev-tools-indicator/dev-tools-indicator.stories.tsx

@@ -55,6 +55,7 @@ const state: OverlayState = {
   versionInfo: mockVersionInfo,
   notFound: false,
   buildingIndicator: false,
+  renderingIndicator: false,
   staticIndicator: true,
   debugInfo: { devtoolsFrontendUrl: undefined },
   isErrorOverlayOpen: false,

packages/next/src/client/components/react-dev-overlay/ui/components/errors/dev-tools-indicator/dev-tools-indicator.tsx

@@ -10,7 +10,6 @@ import {
 import { useState, useEffect, useRef, createContext, useContext } from 'react'
 import { Toast } from '../../toast'
 import { NextLogo } from './next-logo'
-import { useIsDevRendering } from '../../../../utils/dev-indicator/dev-render-indicator'
 import { useDelayedRender } from '../../../hooks/use-delayed-render'
 import { TurbopackInfo } from './dev-tools-info/turbopack-info'
 import { RouteInfo } from './dev-tools-info/route-info'
@@ -54,6 +53,7 @@ export function DevToolsIndicator({
       semver={state.versionInfo.installed}
       issueCount={errorCount}
       isDevBuilding={state.buildingIndicator}
+      isDevRendering={state.renderingIndicator}
       isStaticRoute={state.staticIndicator}
       hide={() => {
         setIsDevToolsIndicatorVisible(false)
@@ -96,6 +96,7 @@ function DevToolsPopover({
   disabled,
   issueCount,
   isDevBuilding,
+  isDevRendering,
   isStaticRoute,
   isTurbopack,
   isBuildError,
@@ -110,6 +111,7 @@ function DevToolsPopover({
   isStaticRoute: boolean
   semver: string | undefined
   isDevBuilding: boolean
+  isDevRendering: boolean
   isTurbopack: boolean
   isBuildError: boolean
   hide: () => void
@@ -297,7 +299,7 @@ function DevToolsPopover({
           onTriggerClick={onTriggerClick}
           toggleErrorOverlay={toggleErrorOverlay}
           isDevBuilding={isDevBuilding}
-          isDevRendering={useIsDevRendering()}
+          isDevRendering={isDevRendering}
           isBuildError={isBuildError}
           scale={scale}
         />

packages/next/src/client/components/react-dev-overlay/ui/dev-overlay.stories.tsx

@@ -74,6 +74,7 @@ const initialState: OverlayState = {
   refreshState: { type: 'idle' },
   notFound: false,
   buildingIndicator: false,
+  renderingIndicator: false,
   staticIndicator: false,
   debugInfo: { devtoolsFrontendUrl: undefined },
   versionInfo: {

packages/next/src/client/components/react-dev-overlay/utils/dev-indicator/dev-render-indicator.tsx

@@ -0,0 +1,24 @@
+import { useContext, useEffect, useTransition } from 'react'
+import { AppDevOverlayDispatchContext } from '../../app/app-dev-overlay'
+import {
+  ACTION_RENDERING_INDICATOR_HIDE,
+  ACTION_RENDERING_INDICATOR_SHOW,
+} from '../../shared'
+
+export const useAppDevRenderingIndicator = () => {
+  const dispatch = useContext(AppDevOverlayDispatchContext)
+  const [isPending, startTransition] = useTransition()
+
+  useEffect(() => {
+    // Only supported in App Router
+    if (dispatch !== null) {
+      if (isPending) {
+        dispatch({ type: ACTION_RENDERING_INDICATOR_SHOW })
+      } else {
+        dispatch({ type: ACTION_RENDERING_INDICATOR_HIDE })
+      }
+    }
+  }, [dispatch, isPending])
+
+  return startTransition
+}

packages/next/src/client/components/react-dev-overlay/utils/dev-indicator/use-app-dev-rendering-indicator.tsx

@@ -35,14 +35,13 @@ export function useActionQueue(
   // this is conceptually how we're modeling the app router state, despite the
   // weird implementation details.
   if (process.env.NODE_ENV !== 'production') {
-    const useSyncDevRenderIndicator =
-      require('./react-dev-overlay/utils/dev-indicator/use-sync-dev-render-indicator')
-        .useSyncDevRenderIndicator as typeof import('./react-dev-overlay/utils/dev-indicator/use-sync-dev-render-indicator').useSyncDevRenderIndicator
+    const { useAppDevRenderingIndicator } =
+      require('./react-dev-overlay/utils/dev-indicator/use-app-dev-rendering-indicator') as typeof import('./react-dev-overlay/utils/dev-indicator/use-app-dev-rendering-indicator')
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    const syncDevRenderIndicator = useSyncDevRenderIndicator()
+    const appDevRenderingIndicator = useAppDevRenderingIndicator()
 
     dispatch = (action: ReducerActions) => {
-      syncDevRenderIndicator(() => {
+      appDevRenderingIndicator(() => {
         actionQueue.dispatch(action, setState)
       })
     }