How to show a loading while getting async storage data

[avegatolber]

Hi! I want to show a spinner while the app is getting the data from the async storage (Indexed DB) is that possible? Otherwise i get an empty screen while async storage data is loading

Sorry if this is duplicated, but i haven't found anything related, this is my code

import { ReactNode } from 'react'

import { del, get, set } from 'idb-keyval'

import { createAsyncStoragePersister } from '@tanstack/query-async-storage-persister'
import { QueryClient } from '@tanstack/react-query'
import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client'

import FullScreenSpinner from '../FullScreenSpinner/FullScreenSpinner'

type Props = {
    children: ReactNode
}

const maxAge = 7 * 24 * 60 * 60 * 1e3 // 7 days

const queryClient = new QueryClient()

const persister = createAsyncStoragePersister({
    storage: {
        setItem: async (key, value) => set(key, value),
        getItem: async (key) => get(key),
        removeItem: async (key) => del(key),
    },
})

const QueryProvider = ({ children }: Props) => {
    //TODO: Show loading while getting async storage data
    if (...) return <FullScreenSpinner />

    return (
        <PersistQueryClientProvider
            persistOptions={{ persister, maxAge }}
            client={queryClient}
        >
            {children}
        </PersistQueryClientProvider>
    )
}

export default QueryProvider

[avegatolber]

This works for me

const QueryProvider = ({ children }: Props) => {
    const [isHydrated, setIsHydrated] = useState(false)

    return (
        <PersistQueryClientProvider
            persistOptions={{ persister, maxAge }}
            onSuccess={() => setIsHydrated(true)}
            client={queryClient}
        >
            {isHydrated ? children : <FullScreenSpinner />}
        </PersistQueryClientProvider>
    )
}

[TkDodo]

We offer a useIsRestoring hook that does this

[avegatolber]

Thanks, final code:

type Props = {
    children: ReactNode
}

const QueryRestoring = ({ children }: Props) => {
    const isRestoring = useIsRestoring()

    return isRestoring ? <FullScreenSpinner /> : children
}

const QueryProvider = ({ children }: Props) => {
    return (
        <PersistQueryClientProvider
            persistOptions={{ persister, maxAge }}
            client={queryClient}
        >
            <QueryRestoring>{children}</QueryRestoring>
        </PersistQueryClientProvider>
    )
}