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

Author: eps1lon

packages/next/src/client/app-next-dev.ts

@@ -3,12 +3,10 @@
 import './app-webpack'
 
 import { appBootstrap } from './app-bootstrap'
-import { initializeDevBuildIndicatorForAppRouter } from './dev/dev-build-indicator/initialize-for-app-router'
 
 const instrumentationHooks = require('../lib/require-instrumentation-client')
 
 appBootstrap(() => {
   const { hydrate } = require('./app-index')
   hydrate(instrumentationHooks)
-  initializeDevBuildIndicatorForAppRouter()
 })

packages/next/src/client/app-next-turbopack.ts

@@ -10,10 +10,4 @@ const instrumentationHooks = require('../lib/require-instrumentation-client')
 appBootstrap(() => {
   const { hydrate } = require('./app-index')
   hydrate(instrumentationHooks)
-
-  if (process.env.NODE_ENV !== 'production') {
-    const { initializeDevBuildIndicatorForAppRouter } =
-      require('./dev/dev-build-indicator/initialize-for-app-router') as typeof import('./dev/dev-build-indicator/initialize-for-app-router')
-    initializeDevBuildIndicatorForAppRouter()
-  }
 })

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

@@ -7,8 +7,10 @@ import formatWebpackMessages from '../utils/format-webpack-messages'
 import { useRouter } from '../../navigation'
 import {
   ACTION_BEFORE_REFRESH,
+  ACTION_BUILDING_INDICATOR_HIDE,
   ACTION_BUILD_ERROR,
   ACTION_BUILD_OK,
+  ACTION_BUILDING_INDICATOR_SHOW,
   ACTION_DEBUG_INFO,
   ACTION_DEV_INDICATOR,
   ACTION_ERROR_OVERLAY_OPEN,
@@ -40,7 +42,6 @@ import type {
 import { REACT_REFRESH_FULL_RELOAD_FROM_ERROR } from '../shared'
 import type { DebugInfo } from '../types'
 import { useUntrackedPathname } from '../../navigation-untracked'
-import { handleDevBuildIndicatorHmrEvents } from '../../../dev/dev-build-indicator/internal/handle-dev-build-indicator-hmr-events'
 import type { GlobalErrorComponent } from '../../global-error'
 import type { DevIndicatorServerState } from '../../../../server/dev/dev-indicator-server-state'
 import reportHmrLatency from '../utils/report-hmr-latency'
@@ -61,6 +62,8 @@ export interface Dispatcher {
   onUnhandledError(error: Error): void
   onUnhandledRejection(error: Error): void
   openErrorOverlay(): void
+  buildingIndicatorHide(): void
+  buildingIndicatorShow(): void
 }
 
 let mostRecentCompilationHash: any = null
@@ -302,6 +305,8 @@ function processMessage(
       break
     }
     case HMR_ACTIONS_SENT_TO_BROWSER.BUILDING: {
+      dispatcher.buildingIndicatorShow()
+
       if (process.env.TURBOPACK) {
         turbopackHmr!.onBuilding()
       } else {
@@ -313,6 +318,8 @@ function processMessage(
     }
     case HMR_ACTIONS_SENT_TO_BROWSER.BUILT:
     case HMR_ACTIONS_SENT_TO_BROWSER.SYNC: {
+      dispatcher.buildingIndicatorHide()
+
       if (obj.hash) {
         handleAvailableHash(obj.hash)
       }
@@ -535,6 +542,12 @@ export default function HotReload({
       openErrorOverlay() {
         dispatch({ type: ACTION_ERROR_OVERLAY_OPEN })
       },
+      buildingIndicatorHide() {
+        dispatch({ type: ACTION_BUILDING_INDICATOR_HIDE })
+      },
+      buildingIndicatorShow() {
+        dispatch({ type: ACTION_BUILDING_INDICATOR_SHOW })
+      },
     }
   }, [dispatch])
 
@@ -596,7 +609,6 @@ export default function HotReload({
     const handler = (event: MessageEvent<any>) => {
       try {
         const obj = JSON.parse(event.data)
-        handleDevBuildIndicatorHmrEvents(obj)
         processMessage(
           obj,
           sendMessage,

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

@@ -5,8 +5,10 @@ import {
 } from './hydration-error-state'
 import {
   ACTION_BEFORE_REFRESH,
+  ACTION_BUILDING_INDICATOR_HIDE,
   ACTION_BUILD_ERROR,
   ACTION_BUILD_OK,
+  ACTION_BUILDING_INDICATOR_SHOW,
   ACTION_DEV_INDICATOR,
   ACTION_REFRESH,
   ACTION_STATIC_INDICATOR,
@@ -115,5 +117,13 @@ export function onDevIndicator(devIndicatorsState: DevIndicatorServerState) {
   Bus.emit({ type: ACTION_DEV_INDICATOR, devIndicator: devIndicatorsState })
 }
 
+export function buildingIndicatorShow() {
+  Bus.emit({ type: ACTION_BUILDING_INDICATOR_SHOW })
+}
+
+export function buildingIndicatorHide() {
+  Bus.emit({ type: ACTION_BUILDING_INDICATOR_HIDE })
+}
+
 export { getErrorByType } from '../utils/get-error-by-type'
 export { getServerError } from '../utils/node-stack-frames'

packages/next/src/client/components/react-dev-overlay/pages/hot-reloader-client.ts

@@ -41,6 +41,8 @@ import {
   onVersionInfo,
   onStaticIndicator,
   onDevIndicator,
+  buildingIndicatorHide,
+  buildingIndicatorShow,
 } from './client'
 import stripAnsi from 'next/dist/compiled/strip-ansi'
 import { addMessageListener, sendMessage } from './websocket'
@@ -272,6 +274,8 @@ function processMessage(obj: HMR_ACTION_TYPES) {
       break
     }
     case HMR_ACTIONS_SENT_TO_BROWSER.BUILDING: {
+      buildingIndicatorShow()
+
       if (process.env.TURBOPACK) {
         turbopackHmr!.onBuilding()
       } else {
@@ -282,6 +286,8 @@ function processMessage(obj: HMR_ACTION_TYPES) {
     }
     case HMR_ACTIONS_SENT_TO_BROWSER.BUILT:
     case HMR_ACTIONS_SENT_TO_BROWSER.SYNC: {
+      buildingIndicatorHide()
+
       if (obj.hash) handleAvailableHash(obj.hash)
 
       const { errors, warnings } = obj

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

@@ -22,6 +22,7 @@ export interface OverlayState {
   refreshState: FastRefreshState
   versionInfo: VersionInfo
   notFound: boolean
+  buildingIndicator: boolean
   staticIndicator: boolean
   showIndicator: boolean
   disableDevIndicator: boolean
@@ -44,6 +45,8 @@ export const ACTION_DEV_INDICATOR = 'dev-indicator'
 export const ACTION_ERROR_OVERLAY_OPEN = 'error-overlay-open'
 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 STORAGE_KEY_THEME = '__nextjs-dev-tools-theme'
 export const STORAGE_KEY_POSITION = '__nextjs-dev-tools-position'
@@ -102,6 +105,13 @@ export interface ErrorOverlayToggleAction {
   type: typeof ACTION_ERROR_OVERLAY_TOGGLE
 }
 
+export interface BuildingIndicatorShowAction {
+  type: typeof ACTION_BUILDING_INDICATOR_SHOW
+}
+export interface BuildingIndicatorHideAction {
+  type: typeof ACTION_BUILDING_INDICATOR_HIDE
+}
+
 export type BusEvent =
   | BuildOkAction
   | BuildErrorAction
@@ -116,6 +126,8 @@ export type BusEvent =
   | ErrorOverlayOpenAction
   | ErrorOverlayCloseAction
   | ErrorOverlayToggleAction
+  | BuildingIndicatorShowAction
+  | BuildingIndicatorHideAction
 
 const REACT_ERROR_STACK_BOTTOM_FRAME_REGEX =
   // 1st group: v8
@@ -149,6 +161,7 @@ export const INITIAL_OVERLAY_STATE: Omit<
   */
   showIndicator: false,
   disableDevIndicator: false,
+  buildingIndicator: false,
   refreshState: { type: 'idle' },
   versionInfo: { installed: '0.0.0', staleness: 'unknown' },
   debugInfo: { devtoolsFrontendUrl: undefined },
@@ -296,6 +309,12 @@ export function useErrorOverlayReducer(
       case ACTION_ERROR_OVERLAY_TOGGLE: {
         return { ...state, isErrorOverlayOpen: !state.isErrorOverlayOpen }
       }
+      case ACTION_BUILDING_INDICATOR_SHOW: {
+        return { ...state, buildingIndicator: true }
+      }
+      case ACTION_BUILDING_INDICATOR_HIDE: {
+        return { ...state, buildingIndicator: false }
+      }
       default: {
         return state
       }

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

@@ -54,6 +54,7 @@ const state: OverlayState = {
   showIndicator: true,
   versionInfo: mockVersionInfo,
   notFound: false,
+  buildingIndicator: 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 { useIsDevBuilding } from '../../../../../../dev/dev-build-indicator/internal/initialize'
 import { useIsDevRendering } from '../../../../utils/dev-indicator/dev-render-indicator'
 import { useDelayedRender } from '../../../hooks/use-delayed-render'
 import { TurbopackInfo } from './dev-tools-info/turbopack-info'
@@ -54,6 +53,7 @@ export function DevToolsIndicator({
       routerType={state.routerType}
       semver={state.versionInfo.installed}
       issueCount={errorCount}
+      isDevBuilding={state.buildingIndicator}
       isStaticRoute={state.staticIndicator}
       hide={() => {
         setIsDevToolsIndicatorVisible(false)
@@ -95,6 +95,7 @@ function DevToolsPopover({
   routerType,
   disabled,
   issueCount,
+  isDevBuilding,
   isStaticRoute,
   isTurbopack,
   isBuildError,
@@ -108,6 +109,7 @@ function DevToolsPopover({
   issueCount: number
   isStaticRoute: boolean
   semver: string | undefined
+  isDevBuilding: boolean
   isTurbopack: boolean
   isBuildError: boolean
   hide: () => void
@@ -291,7 +293,7 @@ function DevToolsPopover({
           issueCount={issueCount}
           onTriggerClick={onTriggerClick}
           toggleErrorOverlay={toggleErrorOverlay}
-          isDevBuilding={useIsDevBuilding()}
+          isDevBuilding={isDevBuilding}
           isDevRendering={useIsDevRendering()}
           isBuildError={isBuildError}
           scale={scale}

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

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