[DevOverlay] Polish new Error Overlay badge (vercel#74975)

This PR adds some polish to the `NextLogo` component to bring it closer
to design:







https://github.com/user-attachments/assets/f9758747-2ea5-4df4-90bc-d8654b3a1e56

Author: raunofreiberg

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

@@ -5,6 +5,7 @@ import React, { useState, useEffect, useRef } from 'react'
 import { NextLogo } from './internal/next-logo'
 import { useIsDevBuilding } from '../../../../../../../dev/dev-build-indicator/internal/initialize-for-new-overlay'
 import { useIsDevRendering } from './internal/dev-render-indicator'
+import { useDelayedRender } from './internal/use-delayed-render'
 
 // TODO: test a11y
 // TODO: add E2E tests to cover different scenarios
@@ -36,6 +37,9 @@ export function DevToolsIndicator({
   )
 }
 
+const ANIMATE_OUT_DURATION_MS = 200
+const ANIMATE_OUT_TIMING_FUNCTION = 'cubic-bezier(0.175, 0.885, 0.32, 1.1)'
+
 const DevToolsPopover = ({
   onIssuesClick,
   issueCount,
@@ -55,6 +59,13 @@ const DevToolsPopover = ({
   const buttonRef = useRef<HTMLDivElement>(null)
   const [isPopoverOpen, setIsPopoverOpen] = useState(false)
 
+  const { mounted, rendered } = useDelayedRender(isPopoverOpen, {
+    // Intentionally no fade in, makes the UI feel more immediate
+    enterDelay: 0,
+    // Graceful fade out to confirm that the UI did not break
+    exitDelay: ANIMATE_OUT_DURATION_MS,
+  })
+
   useEffect(() => {
     // Close popover when clicking outside of it or its button
     const handleClickOutside = (event: MouseEvent) => {
@@ -114,13 +125,20 @@ const DevToolsPopover = ({
         />
       </div>
 
-      {isPopoverOpen && (
+      {mounted && (
         <div
           ref={popoverRef}
           id="dev-tools-popover"
           role="dialog"
           aria-labelledby="dev-tools-title"
           data-nextjs-dev-tools-popover
+          data-rendered={rendered}
+          style={
+            {
+              '--animate-out-duration-ms': `${ANIMATE_OUT_DURATION_MS}ms`,
+              '--animate-out-timing-function': ANIMATE_OUT_TIMING_FUNCTION,
+            } as React.CSSProperties
+          }
           tabIndex={-1}
         >
           <div data-nextjs-dev-tools-content>