Setting loading screen for at least 1 second using isLoading from useQuery

[omer921]

I am currently building a react native app which has a loading screen. The API returns too quickly and the loading screen seems like a flicker (because it is displayed for such a short time) which leads to bad UX. I was wondering if there is a way to configure a minimum loading time in the case that the API returns too fast it will still show the loading screen till the time passes.

[TkDodo]

I’d do it the other way around: only start displaying the loading spinner after about 250ms to avoid flashes. Don’t make your app slower than it needs to be.

Both ways can be done in user land because it’s up to you what to render when. Don’t try to influence the isLoading flag, but what you render because of it.

[omer921]

Thank you! Do you mind showing an example of how you would do this in react native. I am struggling to implement either of the ways you mentioned.

[TkDodo]

not sure if this is 100% correct, but something like:

export const FallbackLoader = ({ timeout = 250 }) => {
    const [loaded, setLoaded] = React.useState(false)

    React.useEffect(() => {
        const timer = setTimeout(() => {
            setLoaded(true)
        }, timeout)

        return () => clearTimeout(timer)
    }, [timeout])

    return loaded ? <LoadingSpinner /> : null
}

not sure if react-native would be any different, I have no experience with that 😅

[faradaytrs]

If you really want to make it slower you can wrap your request function with something like that:

const [response] = await Promise.all([requestFn(), new Promise(resolve => setTimeout(resolve, 1000))]);
return response;

and when you make request you will get 1 second, or, if real request takes longer, then longer.

const slowDownRequest = (request, minTime) => {
    return async (...args) => {
        const [response] = await Promise.all([request(...args), new Promise(resolve => setTimeout(resolve, minTime))]);
        return response;
    }
}

And then wrap it before giving to useQuery:

const {data, isLoading} = useQuery('key', slowDownRequest(fetchData, 1000), {});

[iliasbhal]

To avoid a flashing loading indicator, I ended up using a hook for that.
You can find it here: https://usehooks.com/usethrottle

	const { isLoading: isLoadingOG, ...rest } = useMutation(/* .... */)
	const isLoading = useThrottle(isLoadingOG, 500); // <---- like so.