tweak static indicator style & behavior

vercel · Oct 11, 2024 · 782c096 · 782c096
1 parent 294a1c5
commit 782c096
Show file tree

Hide file tree

Showing 4 changed files with 98 additions and 22 deletions.
diff --git a/packages/next/src/client/components/react-dev-overlay/app/hot-reloader-client.tsx b/packages/next/src/client/components/react-dev-overlay/app/hot-reloader-client.tsx
@@ -333,7 +333,20 @@ function processMessage(
           // as we'll receive the updated manifest before usePathname
           // triggers for new value
           if ((pathnameRef.current as string) in obj.data) {
-            dispatcher.onStaticIndicator(true)
+            // the indicator can be hidden for an hour.
+            // check if it's still hidden
+            const indicatorHiddenAt = Number(
+              localStorage?.getItem('__NEXT_DISMISS_PRERENDER_INDICATOR')
+            )
+
+            const isHidden =
+              indicatorHiddenAt &&
+              !isNaN(indicatorHiddenAt) &&
+              Date.now() < indicatorHiddenAt
+
+            if (!isHidden) {
+              dispatcher.onStaticIndicator(true)
+            }
           } else {
             dispatcher.onStaticIndicator(false)
           }
@@ -600,7 +613,18 @@ export default function HotReload({
 
       if (appIsrManifest) {
         if (pathname in appIsrManifest) {
-          dispatcher.onStaticIndicator(true)
+          const indicatorHiddenAt = Number(
+            localStorage?.getItem('__NEXT_DISMISS_PRERENDER_INDICATOR')
+          )
+
+          const isHidden =
+            indicatorHiddenAt &&
+            !isNaN(indicatorHiddenAt) &&
+            Date.now() < indicatorHiddenAt
+
+          if (!isHidden) {
+            dispatcher.onStaticIndicator(true)
+          }
         } else {
           dispatcher.onStaticIndicator(false)
         }

diff --git a/packages/next/src/client/components/react-dev-overlay/internal/components/Toast/Toast.tsx b/packages/next/src/client/components/react-dev-overlay/internal/components/Toast/Toast.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react'
 
-export type ToastProps = {
+export type ToastProps = React.HTMLProps<HTMLDivElement> & {
   children?: React.ReactNode
   onClick?: () => void
   className?: string

diff --git a/packages/next/src/client/components/react-dev-overlay/internal/components/Toast/styles.ts b/packages/next/src/client/components/react-dev-overlay/internal/components/Toast/styles.ts
@@ -27,25 +27,64 @@ const styles = css`
   }
 
   .nextjs-static-indicator-toast-wrapper {
-    padding: 8px 16px;
+    width: 30px;
+    height: 30px;
+    overflow: hidden;
+    border: 0;
     border-radius: var(--size-gap-triple);
     background: var(--color-background);
     color: var(--color-font);
+    transition: all 0.3s ease-in-out;
   }
 
-  .nextjs-static-indicator-toast-wrapper div {
+  .nextjs-static-indicator-toast-wrapper:hover {
+    width: 140px;
+  }
+
+  .nextjs-static-indicator-toast-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 30px;
+    height: 30px;
+  }
+
+  .nextjs-static-indicator-toast-text {
+    font-size: 14px;
     display: flex;
-    flex-direction: row;
     align-items: center;
+    justify-content: center;
+    opacity: 0;
+    white-space: nowrap;
+    transition: opacity 0.3s ease-in-out;
+    line-height: 30px;
+    position: absolute;
+    left: 30px;
+    top: 0;
   }
 
-  .nextjs-static-indicator-toast-wrapper span {
-    padding: 4px;
-    margin: 0;
+  .nextjs-static-indicator-toast-wrapper:hover
+    .nextjs-static-indicator-toast-text {
+    opacity: 1;
   }
 
   .nextjs-static-indicator-toast-wrapper button {
     color: var(--color-font);
+    opacity: 0.8;
+    background: none;
+    border: none;
+    margin-left: 6px;
+    margin-top: -2px;
+    outline: 0;
+  }
+
+  .nextjs-static-indicator-toast-wrapper button:focus {
+    opacity: 1;
+  }
+
+  .nextjs-static-indicator-toast-wrapper button > svg {
+    width: 16px;
+    height: 16px;
   }
 `
 

diff --git a/packages/next/src/client/components/react-dev-overlay/internal/container/StaticIndicator.tsx b/packages/next/src/client/components/react-dev-overlay/internal/container/StaticIndicator.tsx
@@ -1,23 +1,36 @@
+import * as React from 'react'
 import { Toast } from '../components/Toast'
 import { LightningBolt } from '../icons/LightningBolt'
 import { CloseIcon } from '../icons/CloseIcon'
 import type { Dispatcher } from '../../app/hot-reloader-client'
 
 export function StaticIndicator({ dispatcher }: { dispatcher?: Dispatcher }) {
   return (
-    <Toast className="nextjs-static-indicator-toast-wrapper">
-      <LightningBolt />
-      <span>Static route </span>
-      <button
-        onClick={() => {
-          dispatcher?.onStaticIndicator(false)
-        }}
-        className="nextjs-toast-hide-button"
-        aria-label="Hide static indicator"
-        style={{ marginLeft: 'var(--size-gap)' }}
-      >
-        <CloseIcon />
-      </button>
+    <Toast className={`nextjs-static-indicator-toast-wrapper`}>
+      <div className="nextjs-static-indicator-toast-icon">
+        <LightningBolt />
+      </div>
+      <div className="nextjs-static-indicator-toast-text">
+        Static route
+        <button
+          onClick={() => {
+            // When dismissed, we hide the indicator for 1 hour. Store the
+            // timestamp for when to show it again.
+            const oneHourAway = new Date().getTime() + 1 * 60 * 60 * 1000
+
+            localStorage?.setItem(
+              '__NEXT_DISMISS_PRERENDER_INDICATOR',
+              oneHourAway.toString()
+            )
+
+            dispatcher?.onStaticIndicator(false)
+          }}
+          className="nextjs-toast-hide-button"
+          aria-label="Hide static indicator"
+        >
+          <CloseIcon />
+        </button>
+      </div>
     </Toast>
   )
 }