# All files / src/components loader.tsx

83.33% Statements 5/6
90% Branches 9/10
100% Functions 1/1
83.33% Lines 5/6

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

    11x

    5x
    1x

    1x

    5x

     import { type FC, type HTMLAttributes } from 'react';
    import cn from 'classnames';

    import ProteinIcon from '../svg/protein.svg';

    import '../styles/components/loader.scss';

    type Props = {
      progress?: number;
    };

    const Loader: FC<Props & HTMLAttributes<HTMLDivElement>> = ({
      progress,
      className,
      ...props
    }) => {
      let p: number | undefined;
      if (progress || progress === 0) {
        Iif (progress < 0 || progress > 1) {
          // eslint-disable-next-line no-console
          console.warn(
            `Loader's "progress" prop needs to be within [0, 1], it is now "${progress}"`
          );
        }
        p = progress;
      }
      return (
        <div className={cn('loader-container', className)} {...props}>
          <ProteinIcon className="loader" width="100" height="100" />
          {p && (
            <span className="loader-container__progress">
              <progress title={`Progress: ${Math.floor(p * 100)}%`} value={p}>
                {Math.floor(p * 100)}%
              </progress>
            </span>
          )}
        </div>
      );
    };

    export default Loader;