# All files / src NullSsrSuspense.tsx

0% Statements 0/46
0% Branches 0/1
0% Functions 0/1
0% Lines 0/46

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47

     import { Suspense, type ReactElement, type ReactNode } from "react";
    import { NoSsr } from "./NoSsr";

    export interface NullSsrSuspenseProps {
      children: ReactNode;

      /**
       * @defaultValue `null`
       */
      fallback?: ReactElement;
    }

    /**
     * A suspense boundary that wraps the children in `NoSsr`
     * @example
     * ```tsx
     * import { NullSsrSuspense } from "@react-md/core";
     * import type { ReactElement } from "react";
     * import { lazy } from "react";
     *
     * const ClientOnlyComponent = lazy(() => import("./ClientOnlyComponent").then((mod) => mod.default));
     *
     * export default async function ServerComponent(): ReactElement {
     *
     *   return (
     *     <>
     *       <ServerCompatibleComponent1 />
     *       <NullSsrSuspense>
     *         <ClientOnlyComponent />
     *       </NullSsrSuspense>
     *       <ServerCompatibleComponent2 />
     *     </>
     *   );
     * }
     * ```
     *
     * @remarks \@since 6.0.0
     */
    export function NullSsrSuspense(props: NullSsrSuspenseProps): ReactElement {
      const { children, fallback } = props;
      return (
        <Suspense fallback={fallback ?? null}>
          <NoSsr>{children}</NoSsr>
        </Suspense>
      );
    }