# All files / src/suspense CircularProgressSuspense.tsx

100% Statements 66/66
100% Branches 3/3
100% Functions 1/1
100% Lines 66/66

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
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    671x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    3x
    3x
    3x
    3x
    3x
    3x
    3x
    3x
    3x
    3x
    3x
    3x
    3x
    3x
    3x
    3x
    3x
    3x
    3x
    3x
    3x
    3x
     import { Suspense, type ReactElement, type ReactNode } from "react";
    import {
      CircularProgress,
      type CircularProgressProps,
    } from "../progress/CircularProgress.js";

    /**
     * @remarks \@since 6.0.0
     */
    export interface CircularProgressSuspenseProps extends CircularProgressProps {
      /**
       * @defaultValue `"Loading"`
       */
      "aria-label"?: string;
      children: ReactNode;
    }

    /**
     * **Server Component**
     *
     * This is just a convenience component to set the `fallback` to the
     * {@link CircularProgress} component.
     *
     * @example
     * Simple Example
     * ```tsx
     * import { CircularProgressSuspense } from "@react-md/core";
     * import type { ReactElement } from "react";
     * import { lazy } from "react";
     *
     * const Component = lazy(() => import('./Some/Path/To/Component'));
     *
     * function Example(): ReactElement {
     *   return (
     *     <CircularProgressSuspense>
     *       <Component />
     *     </CircularProgressSuspense>
     *   );
     * }
     * ```
     *
     * @remarks \@since 6.0.0
     */
    export function CircularProgressSuspense(
      props: CircularProgressSuspenseProps
    ): ReactElement {
      const {
        children,
        "aria-labelledby": ariaLabelledBy,
        "aria-label": ariaLabel = ariaLabelledBy ? undefined : "Loading",
        ...progressProps
      } = props;
      return (
        <Suspense
          fallback={
            <CircularProgress
              aria-label={ariaLabel as string}
              aria-labelledby={ariaLabelledBy}
              {...progressProps}
            />
          }
        >
          {children}
        </Suspense>
      );
    }