React-Query 글로벌로딩

임시 글로벌로딩을 만들었다.

const GlobalLoading = () => {
    const isFetching = useIsFetching();
    const isMutating = useIsMutating();
    const { isLoading } = commonStore();

    return (
        ( isLoading || isFetching > 0 || isMutating > 0 ) && (
            <div className="loading_wrap">
                <div className="dim"></div>
                <div className="loading">
                    <img src={loaing} alt={'로딩중'} />
                </div>
            </div>
        )
    );
};

export default GlobalLoading;

useIsFetching 현재 fetch중인 get api갯수가 리턴된다.
ex) 5개의 get api요청시 5가 리턴되고 완료되는것들은 숫자에서 제외된다.

useIsMutating 마찬가지로 useMutation 중인 api의 갯수가 나온다.

isLoading:boolean 은 zustand store로 따로 만들어서 원할 때 글로벌 로딩을 뛰운다

참고
https://react-query.tanstack.com/reference/useIsFetching