[React-Query] Loading(Query/Page) And Icon

📝 react-Query Loading And Page Loading

React Query가 Fetching될때마다 실행되는 loading

📌 reactQuery Loading

import {ReactElement} from 'react'
import {useIsFetching, useIsMutating} from 'react-query'
import LoadingIcon from '../components/LoadingIcon'

function ReactQueryLoading(): ReactElement {
  const isFetching = useIsFetching()
  const isMutating = useIsMutating()

  const display = isFetching || isMutating ? 'inherit' : 'none'
  // 👉 isFetching => fetching이 일어날때마다
  // 👉 isMutating => mutating이 일어날때마다

  return <LoadingIcon display={display} />
}

export default ReactQueryLoading

📌 Loading Icon(CSS)

📌 Loading Icon(React)

import styled from 'styled-components'

interface ILoadingIcon {
  display?: string
}

function LoadingIcon({display = 'inherit'}: ILoadingIcon) {
  return (
    <LoadingText display={display}>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </LoadingText>
  )
}

export default LoadingIcon

const LoadingText = styled.div<{display: string}>`
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #00000005;
  display: ${(props) => props.display};

  & > div {
    position: absolute;
    box-sizing: border-box;
    display: block;
    top: 50%;
    left: 50%;
    width: 64px;
    height: 64px;
    border: 8px solid #000;
    border-radius: 50%;
    animation: loading-animation 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    border-color: #000 transparent transparent transparent;
  }
  div:nth-child(1) {
    animation-delay: -0.45s;
  }
  div:nth-child(2) {
    animation-delay: -0.3s;
  }
  div:nth-child(3) {
    animation-delay: -0.15s;
  }

  @keyframes loading-animation {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
`

📌 index(or App.js)

import {QueryClient, QueryClientProvider} from 'react-query'   
import {ReactQueryDevtools} from 'react-query/devtools'
import ReactQueryLoading from './ReactQueryLoading' 
   
<QueryClientProvider client={queryClient}>
   <ReactQueryLoading /> // 👉 loading 일어날때마다 발생
   <RouterProvider router={routes} />
   <ReactQueryDevtools />
</QueryClientProvider>	

📌 page loading

import loadable from '@loadable/component'
import LoadingIcon from './LoadingIcon'

const fallback = {
  fallback: <LoadingIcon />
}

const ExampleRoute1 = loadable(() => import('./ExampleRoute1'), fallback)
const ExampleRoute2 = loadable(() => import('./ExampleRoute2'), fallback)

🤓 느낀점

loading을 통해서 block-shift를 방지할수도 있고 데이터가 느리게 변하는것도 방지를 할수 있었다.
react query로 할수있는것들이 다양해지고 광범위하게 사용가능한점이 매우 좋은것 같다.