# All files / src/suspense CircularProgressSuspense.tsx

0% Statements 0/66
0% Branches 0/1
0% Functions 0/1
0% Lines 0/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
    67

     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>
      );
    }