github.com/oinume/lekcije@v0.0.0-20231017100347-5b4c5eb6ab24/frontend/src/components/Loader.tsx (about)

     1  import type {CSSProperties} from 'react';
     2  import React from 'react';
     3  import {ClipLoader} from 'react-spinners';
     4  
     5  type Props = {
     6    readonly isLoading: boolean;
     7    readonly message?: string;
     8    readonly css?: CSSProperties;
     9    readonly size?: number;
    10  };
    11  
    12  // TODO: Use bootstrap loader: https://getbootstrap.com/docs/4.4/components/spinners/
    13  export const Loader = ({isLoading, message, css, size}: Props) => {
    14    if (message === undefined) {
    15      message = 'Loading data ...';
    16    }
    17  
    18    if (css === undefined) {
    19      css = {
    20        background: 'rgba(255, 255, 255, 0)',
    21      };
    22    }
    23  
    24    if (size === undefined) {
    25      size = 50;
    26    }
    27  
    28    return isLoading ? (
    29      <div className="overlay-content">
    30        <div className="wrapper" style={{textAlign: 'center'}}>
    31          <ClipLoader cssOverride={css} size={size} color="#123abc" loading={isLoading}/>
    32          <p>
    33            <span className="message">{message}</span>
    34          </p>
    35        </div>
    36      </div>
    37    ) : null;
    38  };