# All files / src/components/display Spinner.tsx

100% Statements 1/1
100% Branches 9/9
100% Functions 1/1
100% Lines 1/1

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

    22x

     import type { JSX } from "react";
    import { type SpinnerBuiltinProps } from "@grackle-ai/common";
    import styles from "./Spinner.module.scss";

    /** Props for the Spinner component (data props inferred from the built-in's zod schema). */
    interface Props extends SpinnerBuiltinProps {
      /** Additional CSS class name. */
      className?: string;
    }

    /**
     * Inline spinning loader that inherits the current text color.
     * Use alongside disabled buttons or hint text to signal in-flight async operations.
     */
    export function Spinner({
      size = "md",
      className,
      label = "Loading",
      liveRegion = false,
    }: Props): JSX.Element {
      return (
        <span
          className={`${styles.spinner} ${styles[size]} ${className ?? ""}`}
          role={liveRegion ? "status" : undefined}
          aria-label={label}
          aria-hidden={liveRegion ? undefined : true}
        />
      );
    }