Show possible timeout messages for React panel

Author: bvaughn

packages/replay-next/components/Loader.tsx

@@ -1,17 +1,19 @@
-import { CSSProperties } from "react";
+import { CSSProperties, ReactNode } from "react";
 
 import styles from "./Loader.module.css";
 
 export default function Loader({
   className = "",
+  message = "Loading…",
   style,
 }: {
   className?: string;
+  message?: ReactNode;
   style?: CSSProperties;
 }) {
   return (
     <div className={`${className} ${styles.Loader}`} data-test-name="Loader" style={style}>
-      Loading…
+      {message}
     </div>
   );
 }

packages/replay-next/components/PanelLoader.module.css

@@ -10,6 +10,7 @@
 .Loader {
   flex: 1 1 auto;
   display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
 }

packages/replay-next/components/PanelLoader.tsx

@@ -1,15 +1,23 @@
-import { CSSProperties } from "react";
+import { CSSProperties, ReactNode } from "react";
 
 import Loader from "replay-next/components/Loader";
 import { LoadingProgressBar } from "replay-next/components/LoadingProgressBar";
 
 import styles from "./PanelLoader.module.css";
 
-export function PanelLoader({ className, style }: { className?: string; style?: CSSProperties }) {
+export function PanelLoader({
+  className,
+  message,
+  style,
+}: {
+  className?: string;
+  message?: ReactNode;
+  style?: CSSProperties;
+}) {
   return (
     <div className={`${styles.Wrapper} ${className}`} style={style}>
       <LoadingProgressBar />
-      <Loader className={styles.Loader} />
+      <Loader className={styles.Loader} message={message} />
     </div>
   );
 }

packages/replay-next/src/suspense/TimingCache.ts

@@ -0,0 +1,26 @@
+import { createStreamingCache } from "suspense";
+
+export const TimeoutCache = createStreamingCache<
+  [eventName: string, timeoutAfterMs: number],
+  boolean
+>({
+  debugLabel: "TimeoutCache",
+  getKey: (eventName: string, timeoutAfterMs: number) => `${eventName}:${timeoutAfterMs}`,
+  load: async (options, _, timeoutAfterMs: number) => {
+    const { resolve, signal, update } = options;
+    console.log("[TimeoutCache] -> streaming", _, timeoutAfterMs);
+
+    update(false);
+
+    const timeout = setTimeout(() => {
+      console.log("[TimeoutCache] -> done", _, timeoutAfterMs);
+      update(true);
+      resolve();
+    }, timeoutAfterMs);
+
+    signal.addEventListener("abort", () => {
+      console.log("[TimeoutCache] -> aborted", _, timeoutAfterMs);
+      clearTimeout(timeout);
+    });
+  },
+});

src/ui/components/SecondaryToolbox/ReactDevTools.module.css

@@ -0,0 +1,16 @@
+.Messages {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  text-align: center;
+}
+
+.Message {
+  color: var(--color-dim);
+  transition: height 0.3s;
+}
+
+.DiscordLink {
+  text-decoration: underline;
+  cursor: pointer;
+}

src/ui/components/SecondaryToolbox/ReactDevTools.tsx

@@ -1,14 +1,54 @@
+import { PropsWithChildren, ReactNode, Suspense } from "react";
+import { useStreamingValue } from "suspense";
+
 import { InlineErrorBoundary } from "replay-next/components/errors/InlineErrorBoundary";
+import ExternalLink from "replay-next/components/ExternalLink";
+import { PanelLoader } from "replay-next/components/PanelLoader";
 import { useMostRecentLoadedPause } from "replay-next/src/hooks/useMostRecentLoadedPause";
+import { TimeoutCache } from "replay-next/src/suspense/TimingCache";
 
 import { ReactDevToolsPanel } from "./react-devtools/components/ReactDevToolsPanel";
+import styles from "./ReactDevTools.module.css";
 
 export default function ReactDevToolsWithErrorBoundary() {
   const { point, pauseId } = useMostRecentLoadedPause() ?? {};
 
   return (
     <InlineErrorBoundary name="ReactDevTools" resetKey={pauseId ?? ""}>
-      <ReactDevToolsPanel executionPoint={point ?? null} pauseId={pauseId ?? null} />
+      <SuspenseWithLoadingStalledMessage>
+        <ReactDevToolsPanel executionPoint={point ?? null} pauseId={pauseId ?? null} />
+      </SuspenseWithLoadingStalledMessage>
     </InlineErrorBoundary>
   );
 }
+
+function SuspenseWithLoadingStalledMessage({ children }: PropsWithChildren) {
+  let message: ReactNode | undefined = undefined;
+
+  const { value: showShortMessage } = useStreamingValue(
+    TimeoutCache.stream("react:annotations-loading-stalled:short", 30_000)
+  );
+  const { value: showLongMessage } = useStreamingValue(
+    TimeoutCache.stream("react:annotations-loading-stalled:long", 300_000)
+  );
+
+  if (showLongMessage) {
+    message = (
+      <div className={styles.Messages}>
+        <p className={styles.Message}>This is taking longer than we expected.</p>
+        <p className={styles.Message}>Something may have gone wrong.</p>
+        <p className={styles.Message}>
+          Contact us{" "}
+          <ExternalLink className={styles.DiscordLink} href="https://discord.gg/n2dTK6kcRX">
+            on Discord
+          </ExternalLink>{" "}
+          if you need more assistance.
+        </p>
+      </div>
+    );
+  } else if (showShortMessage) {
+    message = <p className={styles.Message}>This is taking longer than expected.</p>;
+  }
+
+  return <Suspense fallback={<PanelLoader message={message} />}>{children}</Suspense>;
+}

src/ui/components/SecondaryToolbox/react-devtools/components/ReactDevToolsPanel.module.css

@@ -80,7 +80,6 @@
 .DisabledDuringPlaybackMessage,
 .NotMountedYetMessage,
 .ProtocolFailedMessage {
-  width: 100%;
   display: flex;
   flex-direction: column;
   color: var(--color-dim);