react spinners for loading layer

axios data fetch시에 loader를 표시해 보고자 찾아 봤다.

세상엔 좋은 사람들이 많다.ㅎㅎ

https://github.com/davidhu2000/react-spinners

GitHub - davidhu2000/react-spinners: A collection of loading spinner components for react

Example을 보고 따라서 만들어 봤다.

App()내어서 사용할 state를 선언하고, axios interceptor를 구현했다. axios실행시 동작한다.

const [loading, setLoading] = useState(false);

useEffect(() => {

        axios.interceptors.request.use((config) => {
            console.log('loading layer open');
            setLoading(true);
            return config;
        }, (error) => {
            console.log('loading layer close caused by request error');
            setLoading(false);
            return Promise.reject(error);
        });

        axios.interceptors.response.use((config) => {
            console.log('loading layer close');
            setLoading(false);
            return config;
        }, (error) => {
            console.log('loading layer close caused by response error');
            setLoading(false);
            return Promise.reject(error);
        });

        return () => {

        }
    }, []);

Loader 콤포넌트를 만들고 ( @emotion/css, @emotion/react 설치 필요 )

import { css } from "@emotion/react";
import ClipLoader from "react-spinners/ClipLoader";

const override = css`
  display: block;
  margin: 0 auto;
  border-color: rgba(255,255,255,0.7);
  border-width: 10px;
`;

export default function Loader(props) {

    return (
        <>
            <div className={'axios-loading'} style={{display:props.loading===true?'block':'none'}}>
                <div className={'axios-loading-indicator'}>
                    <ClipLoader color={props.color} loading={props.loading} css={override}  size={150} />
                </div>
            </div>
        </>
    )
}

css추가

.axios-loading {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    overflow: auto;
    display: block;
    position: fixed !important;
    background-color: rgba(0, 0, 0, 0.1);
}

.axios-loading-indicator {
    top: 45%;
    left: calc(50% - 75px);
    position: fixed;
}

App render에 컴포넌트 부착(?)

<Loader loading={loading} color={color} onClick={setLoading}/>

bootstrap 5에는 Spinner가 자체적으로 있다. 물론 react-bootstrap v2에도 있다.

import React, {JSX} from 'react';
import {Spinner} from "react-bootstrap";

interface LoaderProps {
  loading: boolean
}

const Loader = (props: LoaderProps): JSX.Element => {
  return (
    <div
      className={`${props.loading === false && 'd-none'} d-flex align-items-center justify-content-center top-0 vw-100 vh-100 mw-100 mh-100 full position-absolute bg-black bg-opacity-50`}>
      <Spinner variant={"light"} animation={"border"} as={"span"}/>
    </div>
  );
}

export default Loader;

state로 관리하면 된다.