Mighty Eight Comments

Mighty Eight

•Created by Mighty Eight on 5/30/2025 in #❓-help

Getting global query loading state on client (react)

Just to answer myself, yes, it is possible. https://discord-questions.trpc.io/m/1069050572185010279 https://tanstack.com/query/latest/docs/framework/react/reference/useIsFetching My code implementation is:

import { useEffect, useRef } from 'react';
import { useIsFetching } from '@tanstack/react-query';
import { nprogress, NavigationProgress } from '@mantine/nprogress';

export function GlobalLoadingIndicator() {

    const isFetching = useIsFetching();
    const timeoutRef = useRef<NodeJS.Timeout | null>(null);

    useEffect(() => {

        if (timeoutRef.current) {
            clearTimeout(timeoutRef.current);
            timeoutRef.current = null;
        }

        if (isFetching > 0) {
            
            timeoutRef.current = setTimeout(() => {
                nprogress.start();
            }, 100);
        } else {
           
            nprogress.complete();
        }

        return () => {
            if (timeoutRef.current) {
                clearTimeout(timeoutRef.current);
                timeoutRef.current = null;
            }
        };
    }, [isFetching]);

    return <NavigationProgress />;
}

import { useEffect, useRef } from 'react';
import { useIsFetching } from '@tanstack/react-query';
import { nprogress, NavigationProgress } from '@mantine/nprogress';

export function GlobalLoadingIndicator() {

    const isFetching = useIsFetching();
    const timeoutRef = useRef<NodeJS.Timeout | null>(null);

    useEffect(() => {

        if (timeoutRef.current) {
            clearTimeout(timeoutRef.current);
            timeoutRef.current = null;
        }

        if (isFetching > 0) {
            
            timeoutRef.current = setTimeout(() => {
                nprogress.start();
            }, 100);
        } else {
           
            nprogress.complete();
        }

        return () => {
            if (timeoutRef.current) {
                clearTimeout(timeoutRef.current);
                timeoutRef.current = null;
            }
        };
    }, [isFetching]);

    return <NavigationProgress />;
}

2 replies