datadog-ux-utils Documentation - v1.0.0
    Preparing search index...

    Function SuspenseWatch

    • Wraps a React.Suspense boundary and reports when the fallback remains visible longer than timeoutMs. A "slow" event is emitted once per suspend cycle (even if the fallback remains longer), and an optional "resolved" event is emitted when the content finally appears.

      Implementation details:

      • We insert tiny sentinels inside both the fallback and the content tree. Mount/unmount of those sentinels tell us when the boundary is suspended or has resolved.
      • Each time the boundary re-suspends, a new cycle begins and the logic repeats.
      • Telemetry uses addAction (and optionally addError) and is sampled.

      Parameters

      Returns Element

      import { SuspenseWatch } from "@milliman/datadog-ux-utils/react/SuspenseWatch";

      export function ResultsSection() {
      return (
      <SuspenseWatch
      id="ResultsSection"
      fallback={<Spinner label="Loading results…" />}
      options={{
      timeoutMs: 1500,
      sampleRate: 25,
      onSlow: ({ id, timeoutMs }) => {
      console.warn(`${id} still loading after ${timeoutMs}ms`);
      },
      }}
      >
      <ResultsList />
      </SuspenseWatch>
      );
      }