react-spinners : 로딩스피너 구현

[Loader.tsx]

import { ClipLoader } from 'react-spinners';
import styled from 'styled-components';

export default function Loader() {
  return <Container>{<ClipLoader color="red" size={80} />}</Container>;
}
const Container = styled.div`
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(5px);
`;

1. yarn add react-spinners

2. 색상 & 크기 조정 

3. styled-components로 css 수정

---

[코드 적용1]

  if (!authContext) {
    //return <div>Loading...</div>;
    return <Loader />;
  }

▶ 기존에 Loding이라고 작성한 부분에 <Loader> 컴포넌트 적용

 

[코드 적용2]

<St.ContentsWrapper>
        {isLoading ? (
          <Loader />
        ) : (
          <St.AdminContents>
           내용내용내용내용내용내용내용내용내용내용
          </St.AdminContents>
        )}
      </St.ContentsWrapper>

▶ isLoading 값에 따라 삼항연산자로 사용

▶ 해당 코드의 경우, useInfiniteQuery를 사용했음 (그 내부에 있는 isLoading값 사용)

 

 

 

끝