fix: mf-5271 warming up persist caching (#10770)

packages/mask/dashboard/initialization/Dashboard.tsx

@@ -1,6 +1,5 @@
 import { useEffect } from 'react'
 import { CssBaseline, ThemeProvider, StyledEngineProvider } from '@mui/material'
-import { QueryClientProvider } from '@tanstack/react-query'
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
 import {
     CustomSnackbarProvider,
@@ -10,11 +9,12 @@ import {
     useSystemPreferencePalette,
     DialogStackingProvider,
 } from '@masknet/theme'
-import { I18NextProviderHMR, SharedContextProvider } from '@masknet/shared'
+import { I18NextProviderHMR, SharedContextProvider, persistOptions } from '@masknet/shared'
 import { ErrorBoundary, queryClient } from '@masknet/shared-base-ui'
 import { createInjectHooksRenderer, useActivatedPluginsDashboard } from '@masknet/plugin-infra/dashboard'
 import { RootWeb3ContextProvider } from '@masknet/web3-hooks-base'
 import { NetworkPluginID, i18NextInstance, queryRemoteI18NBundle } from '@masknet/shared-base'
+import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client'
 
 import '../utils/kv-storage.js'
 
@@ -41,7 +41,7 @@ export default function DashboardRoot(props: React.PropsWithChildren<{}>) {
     // #endregion
 
     return (
-        <QueryClientProvider client={queryClient}>
+        <PersistQueryClientProvider client={queryClient} persistOptions={persistOptions}>
             <RootWeb3ContextProvider value={{ pluginID: NetworkPluginID.PLUGIN_EVM }}>
                 {process.env.NODE_ENV === 'development' ? (
                     <ReactQueryDevtools position="bottom-right" toggleButtonProps={{ style: { width: 24 } }} />
@@ -67,6 +67,6 @@ export default function DashboardRoot(props: React.PropsWithChildren<{}>) {
                     </StyledEngineProvider>
                 </I18NextProviderHMR>
             </RootWeb3ContextProvider>
-        </QueryClientProvider>
+        </PersistQueryClientProvider>
     )
 }

packages/mask/dashboard/pages/CreateMaskWallet/AddDeriveWallet/index.tsx

@@ -1,7 +1,8 @@
+import { delay } from '@masknet/kit'
 import { DeriveWalletTable } from '@masknet/shared'
 import { DashboardRoutes, EMPTY_LIST } from '@masknet/shared-base'
 import { makeStyles } from '@masknet/theme'
-import { useWallets } from '@masknet/web3-hooks-base'
+import { useWallet, useWallets } from '@masknet/web3-hooks-base'
 import { Web3 } from '@masknet/web3-providers'
 import {
     HD_PATH_WITHOUT_INDEX_ETHEREUM,
@@ -90,6 +91,7 @@ const AddDeriveWallet = memo(function AddDeriveWallet() {
     const [pathIndexes, setPathIndexes] = useState<number[]>([])
     const { handlePasswordAndWallets } = ResetWalletContext.useContainer()
 
+    useWallet() // Warming up persist caching
     const wallets = useWallets()
     const existedSiblingQueries = useQueries({
         queries: isReset
@@ -173,6 +175,7 @@ const AddDeriveWallet = memo(function AddDeriveWallet() {
         })
         await Services.Wallet.resolveMaskAccount([{ address: firstWallet }])
         Telemetry.captureEvent(EventType.Access, EventID.EntryPopupWalletImport)
+        await delay(300) // Wait for warming up above. 300ms is the closed duration after testing.
         navigate(urlcat(DashboardRoutes.SignUpMaskWalletOnboarding, { external_request }), { replace: true })
     }, [mnemonic, wallets.length, isReset, password, mergedIndexes, external_request])
 

packages/mask/package.json

@@ -93,7 +93,9 @@
     "@servie/events": "^3.0.0",
     "@sinonjs/text-encoding": "^0.7.2",
     "@splinetool/react-spline": "2.2.6",
+    "@tanstack/query-sync-storage-persister": "^4.35.0",
     "@tanstack/react-query-devtools": "^4.29.25",
+    "@tanstack/react-query-persist-client": "^4.35.0",
     "@types/bn.js": "^4.11.6",
     "@types/d3": "5.16.4",
     "@types/elliptic": "^6.4.14",

packages/shared/src/UI/contexts/PageUIProvider.tsx

@@ -5,8 +5,8 @@ import { CSSVariableInjector, DialogStackingProvider, MaskThemeProvider } from '
 import { I18NextProviderHMR, SharedContextProvider } from '@masknet/shared'
 import { compose, i18NextInstance } from '@masknet/shared-base'
 import { ErrorBoundary, queryClient } from '@masknet/shared-base-ui'
-import { PersistQueryClientProvider, type PersistQueryClientOptions } from '@tanstack/react-query-persist-client'
-import { createSyncStoragePersister } from '@tanstack/query-sync-storage-persister'
+import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client'
+import { persistOptions } from './localStoragePersist.js'
 
 export function PageUIProvider(useTheme: () => Theme, children: React.ReactNode, fallback?: React.ReactNode) {
     return compose(
@@ -26,20 +26,6 @@ interface MaskUIRootProps extends React.PropsWithChildren<{}> {
     fallback?: React.ReactNode
 }
 
-const persister = createSyncStoragePersister({
-    storage: window.localStorage,
-})
-// We don't persist all queries but only those have the first key starts with '@@'
-const persistOptions: Omit<PersistQueryClientOptions, 'queryClient'> = {
-    persister,
-    dehydrateOptions: {
-        shouldDehydrateQuery: ({ queryKey }) => {
-            if (typeof queryKey[0] !== 'string') return false
-            return queryKey[0].startsWith('@@')
-        },
-    },
-}
-
 function MaskUIRoot({ children, useTheme, fallback }: MaskUIRootProps) {
     return (
         <DialogStackingProvider hasGlobalBackdrop={false}>

packages/shared/src/UI/contexts/index.ts

@@ -3,3 +3,4 @@ export * from './components/index.js'
 export * from './SharedContextProvider.js'
 export * from './PageUIProvider.js'
 export * from './SiteUIProvider.js'
+export * from './localStoragePersist.js'

packages/shared/src/UI/contexts/localStoragePersist.ts

@@ -0,0 +1,16 @@
+import { createSyncStoragePersister } from '@tanstack/query-sync-storage-persister'
+import type { PersistQueryClientOptions } from '@tanstack/react-query-persist-client'
+
+const persister = createSyncStoragePersister({
+    storage: window.localStorage,
+})
+// We don't persist all queries but only those have the first key starts with '@@'
+export const persistOptions: Omit<PersistQueryClientOptions, 'queryClient'> = {
+    persister,
+    dehydrateOptions: {
+        shouldDehydrateQuery: ({ queryKey }) => {
+            if (typeof queryKey[0] !== 'string') return false
+            return queryKey[0].startsWith('@@')
+        },
+    },
+}