[React-spinner] loading spinner 적용하기 axios interseptor

참고 git

npm i react-spinners

 

 

spiner적용 component를 하나 만들엉줍니다.

- loading.js

import React, { useEffect} from 'react'
import { css } from "@emotion/react";
import BeatLoader from "react-spinners/BeatLoader";

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

const Loading = (props) => {
  const check = props.loading == null ? false : props.loading

  return (
    check &&
    <div className='axios-loading' style={{display:props.loading===true?'block':'none'}}>
        <div className='axios-loading-indicator'>
            <BeatLoader color={"white"} loading={props.loading} css={override}  size={40} />
        </div>
    </div>
  )

}

export default Loading

저는 BeatLoader를 사용했습니다.

demoPage 에서 다양한 spinner  확인 가능 합니다.

 

- css.js

/* axios spiner */
.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.3);
}

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

 

 

axios를 전역적으로 가로채야함으로

- app.js

import Loading from "./views/components/Loading";

loading component를 가져오고

 

function App() {
  //loading spiner
  const [loading, setLoading] = useState(false)

  useEffect(()=>{
    //axios 호출시 인터셉트
    axios.interceptors.request.use(function (config) {
      if(config.url.includes('detection')){
        setLoading(true)
      }
      return config
    }, function (error) {
      return Promise.reject(error);
    });
    //axios 호출 종료시 인터셉트
    axios.interceptors.response.use(function (response) {      
      setLoading(false)
      return response;
    }, function (error) {
      setLoading(false)
      return Promise.reject(error);
    });
  },[]);

  return (
    <>
      <BrowserRouter>
        <React.Suspense fallback={<Loading loading={loading}/>}>
          <Switch>
            {
              <Route path="/" name="Home" render={(props) =>{
                  return <DefaultLayout {...props}/>
                }}
              />
            }
          </Switch>
        </React.Suspense>
      </BrowserRouter>
      <Loading loading={loading}/>
    </>
  )
}
export default App

 

<Loading loading={loading}/>

 넣어주어 spinner 를 띄워줍니다.

 

 

전 api 중 detection이 포함 될때만 로딩 스피너를 띄우게 설정했습니다.

config.url.includes('detection')