better maintenance

Author: devjiwonchoi

packages/next/src/next-devtools/dev-overlay/components/devtools-indicator/devtools-indicator.tsx

@@ -2,7 +2,7 @@ import type { CSSProperties } from 'react'
 import type { OverlayState, OverlayDispatch } from '../../shared'
 import type { DevToolsScale } from '../errors/dev-tools-indicator/dev-tools-info/preferences'
 
-import { useState, useRef } from 'react'
+import { useState } from 'react'
 import { NextLogo } from './next-logo'
 import { Toast } from '../toast'
 import {
@@ -31,8 +31,6 @@ export function DevToolsIndicator({
   const [open, setOpen] = useState(false)
   const [position, setPosition] = useState(getInitialPosition())
 
-  const triggerRef = useRef<HTMLButtonElement | null>(null)
-
   const [vertical, horizontal] = position.split('-', 2)
 
   const toggleErrorOverlay = () => {
@@ -66,7 +64,6 @@ export function DevToolsIndicator({
       >
         {/* Trigger */}
         <NextLogo
-          ref={triggerRef}
           aria-haspopup="menu"
           aria-expanded={open}
           aria-controls="nextjs-dev-tools-menu"

packages/next/src/next-devtools/dev-overlay/components/devtools-indicator/hooks/use-measure-width.ts

@@ -0,0 +1,24 @@
+import { useEffect, useState } from 'react'
+
+export function useMeasureWidth(
+  ref: React.RefObject<HTMLDivElement | null>
+): number {
+  const [width, setWidth] = useState<number>(0)
+
+  useEffect(() => {
+    const el = ref.current
+
+    if (!el) {
+      return
+    }
+
+    const observer = new ResizeObserver(([{ contentRect }]) => {
+      setWidth(contentRect.width)
+    })
+
+    observer.observe(el)
+    return () => observer.disconnect()
+  }, [ref])
+
+  return width
+}

packages/next/src/next-devtools/dev-overlay/components/devtools-indicator/hooks/use-minimum-loading-time-multiple.ts

@@ -0,0 +1,73 @@
+import { useEffect, useRef, useState } from 'react'
+
+/**
+ * A React hook that ensures a loading state persists
+ * at least up to the next multiple of a given interval (default: 750ms).
+ *
+ * For example, if you're done loading at 1200ms, it forces you to wait
+ * until 1500ms. If it’s 1800ms, it waits until 2250ms, etc.
+ *
+ * @param isLoadingTrigger - Boolean that triggers the loading state
+ * @param interval - The time interval multiple in ms (default: 750ms)
+ * @returns Current loading state that respects multiples of the interval
+ */
+export function useMinimumLoadingTimeMultiple(
+  isLoadingTrigger: boolean,
+  interval = 750
+) {
+  const [isLoading, setIsLoading] = useState(false)
+  const loadStartTimeRef = useRef<number | null>(null)
+  const timeoutIdRef = useRef<NodeJS.Timeout | null>(null)
+
+  useEffect(() => {
+    // Clear any pending timeout to avoid overlap
+    if (timeoutIdRef.current) {
+      clearTimeout(timeoutIdRef.current)
+      timeoutIdRef.current = null
+    }
+
+    if (isLoadingTrigger) {
+      // If we enter "loading" state, record start time if not already
+      if (loadStartTimeRef.current === null) {
+        loadStartTimeRef.current = Date.now()
+      }
+      setIsLoading(true)
+    } else {
+      // If we're exiting the "loading" state:
+      if (loadStartTimeRef.current === null) {
+        // No start time was recorded, so just stop loading immediately
+        setIsLoading(false)
+      } else {
+        // How long we've been "loading"
+        const timeDiff = Date.now() - loadStartTimeRef.current
+
+        // Next multiple of `interval` after `timeDiff`
+        const nextMultiple = interval * Math.ceil(timeDiff / interval)
+
+        // Remaining time needed to reach that multiple
+        const remainingTime = nextMultiple - timeDiff
+
+        if (remainingTime > 0) {
+          // If not yet at that multiple, schedule the final step
+          timeoutIdRef.current = setTimeout(() => {
+            setIsLoading(false)
+            loadStartTimeRef.current = null
+          }, remainingTime)
+        } else {
+          // We're already past the multiple boundary
+          setIsLoading(false)
+          loadStartTimeRef.current = null
+        }
+      }
+    }
+
+    // Cleanup when effect is about to re-run or component unmounts
+    return () => {
+      if (timeoutIdRef.current) {
+        clearTimeout(timeoutIdRef.current)
+      }
+    }
+  }, [isLoadingTrigger, interval])
+
+  return isLoading
+}

packages/next/src/next-devtools/dev-overlay/components/devtools-indicator/hooks/use-update-animation.ts

@@ -0,0 +1,37 @@
+import { useEffect, useRef, useState } from 'react'
+
+export function useUpdateAnimation(
+  issueCount: number,
+  animationDurationMs = 0
+) {
+  const lastUpdatedTimeStamp = useRef<number | null>(null)
+  const [animate, setAnimate] = useState(false)
+
+  useEffect(() => {
+    if (issueCount > 0) {
+      const deltaMs = lastUpdatedTimeStamp.current
+        ? Date.now() - lastUpdatedTimeStamp.current
+        : -1
+      lastUpdatedTimeStamp.current = Date.now()
+
+      // We don't animate if `issueCount` changes too quickly
+      if (deltaMs <= animationDurationMs) {
+        return
+      }
+
+      setAnimate(true)
+      // It is important to use a CSS transitioned state, not a CSS keyframed animation
+      // because if the issue count increases faster than the animation duration, it
+      // will abruptly stop and not transition smoothly back to its original state.
+      const timeoutId = window.setTimeout(() => {
+        setAnimate(false)
+      }, animationDurationMs)
+
+      return () => {
+        clearTimeout(timeoutId)
+      }
+    }
+  }, [issueCount, animationDurationMs])
+
+  return animate
+}