How to show a loading while getting async storage data

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

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