How to show a loading while getting async storage data
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
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
2 Replies
frozen-sapphire•11mo ago
const [isHydrated, setIsHydrated] = useState(false)
if (!isHydrated) return <Spin />
return (
<PersistQueryClientProvider
persistOptions={{ persister, maxAge }}
client={queryClient}
onSuccess={() => setIsHydrated(true)}
>
{children}
</PersistQueryClientProvider>
)
const [isHydrated, setIsHydrated] = useState(false)
if (!isHydrated) return <Spin />
return (
<PersistQueryClientProvider
persistOptions={{ persister, maxAge }}
client={queryClient}
onSuccess={() => setIsHydrated(true)}
>
{children}
</PersistQueryClientProvider>
)
absent-sapphireOP•11mo ago
Thanks, i made some changes, and now it works
import { QueryClient, useIsRestoring } from '@tanstack/react-query'
import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client'
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>
)
}
import { QueryClient, useIsRestoring } from '@tanstack/react-query'
import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client'
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>
)
}