fix(ui): adds delay to progress bar for fast networks (#11157)

On fast networks where page transitions are quick, such as local dev in
most cases, the progress bar should not render. This leads to a constant
flashing of the progress bar at the top of the screen and does not
provide any value.

The fix is to add a delay to the initial rendering of the progress bar,
and only show if the transition takes longer than _n_ milliseconds. This
value can be adjusted as needed, but right now is set to 150ms.

Introduced in #9275.

packages/ui/src/providers/RouteTransition/ProgressBar/index.tsx

@@ -1,11 +1,12 @@
 'use client'
-import React, { useEffect } from 'react'
+import React, { useEffect, useRef } from 'react'
 
 import { useRouteTransition } from '../index.js'
 import './index.scss'
 
 const transitionDuration = 200
 const baseClass = 'progress-bar'
+const initialDelay = 150
 
 /**
  * Renders a progress bar that shows the progress of a route transition.
@@ -23,13 +24,24 @@ const baseClass = 'progress-bar'
 export const ProgressBar = () => {
   const { isTransitioning, transitionProgress } = useRouteTransition()
   const [progressToShow, setProgressToShow] = React.useState<null | number>(null)
+  const shouldDelayProgress = useRef(true)
 
   useEffect(() => {
     let clearTimerID: NodeJS.Timeout
+    let delayTimerID: NodeJS.Timeout
 
     if (isTransitioning) {
-      setProgressToShow(transitionProgress)
+      if (shouldDelayProgress.current) {
+        delayTimerID = setTimeout(() => {
+          setProgressToShow(transitionProgress)
+          shouldDelayProgress.current = false
+        }, initialDelay)
+      } else {
+        setProgressToShow(transitionProgress)
+      }
     } else {
+      shouldDelayProgress.current = true
+
       // Fast forward to 100% when the transition is complete
       // Then fade out the progress bar directly after
       setProgressToShow(1)
@@ -41,7 +53,10 @@ export const ProgressBar = () => {
       }, transitionDuration * 2)
     }
 
-    return () => clearTimeout(clearTimerID)
+    return () => {
+      clearTimeout(clearTimerID)
+      clearTimeout(delayTimerID)
+    }
   }, [isTransitioning, transitionProgress])
 
   if (typeof progressToShow === 'number') {
@@ -64,4 +79,6 @@ export const ProgressBar = () => {
       </div>
     )
   }
+
+  return null
 }

tsconfig.base.json

@@ -31,7 +31,7 @@
       }
     ],
     "paths": {
-      "@payload-config": ["./test/_community/config.ts"],
+      "@payload-config": ["./test/admin/config.ts"],
       "@payloadcms/live-preview": ["./packages/live-preview/src"],
       "@payloadcms/live-preview-react": ["./packages/live-preview-react/src/index.ts"],
       "@payloadcms/live-preview-vue": ["./packages/live-preview-vue/src/index.ts"],