ra-core/dist/dataProvider/useLoading.js

Core components of react-admin, a frontend Framework for building admin applications on top of REST services, using ES6, React

import React from 'react';
import { notifyManager, useQueryClient } from '@tanstack/react-query';
/**
 * Get the state of the dataProvider connection.
 *
 * Returns true if a query or a mutation is pending.
 *
 * Custom implementation because react-query's useIsFetching and useIsMutating
 * render each time the number of active queries changes, which is too often.
 *
 * @see useIsFetching
 * @see useIsMutating
 */
export const useLoading = () => {
    const client = useQueryClient();
    const mountedRef = React.useRef(false);
    const isFetchingRef = React.useRef(client.isFetching() > 0);
    const isMutatingRef = React.useRef(client.isMutating() > 0);
    const [isLoading, setIsLoading] = React.useState(isFetchingRef.current || isMutatingRef.current);
    React.useEffect(() => {
        mountedRef.current = true;
        const unsubscribeQueryCache = client.getQueryCache().subscribe(notifyManager.batchCalls(() => {
            if (mountedRef.current) {
                isFetchingRef.current = client.isFetching() > 0;
                setIsLoading(isFetchingRef.current || isMutatingRef.current);
            }
        }));
        const unsubscribeMutationCache = client.getMutationCache().subscribe(notifyManager.batchCalls(() => {
            if (mountedRef.current) {
                isMutatingRef.current = client.isMutating() > 0;
                setIsLoading(isFetchingRef.current || isMutatingRef.current);
            }
        }));
        return () => {
            mountedRef.current = false;
            unsubscribeQueryCache();
            unsubscribeMutationCache();
        };
    }, [client]);
    return isLoading;
};
//# sourceMappingURL=useLoading.js.map