perf: improve Home first screen without perf marks

packages/kit/src/components/AccountSelector/AllNetworksManagerTrigger.tsx

@@ -1,5 +1,5 @@
 import type { ComponentProps } from 'react';
-import { useCallback, useEffect } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 
 import { useIntl } from 'react-intl';
 
@@ -24,6 +24,7 @@ import networkUtils from '@onekeyhq/shared/src/utils/networkUtils';
 
 import { useEnabledNetworksCompatibleWithWalletIdInAllNetworks } from '../../hooks/useAllNetwork';
 import { useActiveAccount } from '../../states/jotai/contexts/accountSelector';
+import { deferHeavyWorkUntilUIIdle } from '../../utils/deferHeavyWork';
 import { NetworkAvatarBase } from '../NetworkAvatar';
 
 function AllNetworksManagerTrigger({
@@ -41,28 +42,81 @@ function AllNetworksManagerTrigger({
     activeAccount: { network, wallet, account, indexedAccount },
   } = useActiveAccount({ num });
 
+  const shouldEnableCompatQuery =
+    Boolean(network?.id) &&
+    networkUtils.isAllNetwork({ networkId: network?.id }) &&
+    !accountUtils.isOthersWallet({ walletId: wallet?.id ?? '' });
+  const [isDeferredReady, setIsDeferredReady] = useState(
+    !shouldEnableCompatQuery,
+  );
+
+  useEffect(() => {
+    let cancelled = false;
+    if (!shouldEnableCompatQuery) {
+      setIsDeferredReady(true);
+      return;
+    }
+    setIsDeferredReady(false);
+    void (async () => {
+      await deferHeavyWorkUntilUIIdle();
+      if (cancelled) return;
+      setIsDeferredReady(true);
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [shouldEnableCompatQuery, wallet?.id, indexedAccount?.id, network?.id]);
+
+  const compatQueryWalletId = useMemo(() => {
+    if (!shouldEnableCompatQuery) {
+      return '';
+    }
+    return isDeferredReady ? wallet?.id ?? '' : '';
+  }, [isDeferredReady, shouldEnableCompatQuery, wallet?.id]);
+
   const {
     enabledNetworksCompatibleWithWalletId,
     enabledNetworksWithoutAccount,
     run,
   } = useEnabledNetworksCompatibleWithWalletIdInAllNetworks({
-    walletId: wallet?.id ?? '',
+    walletId: compatQueryWalletId,
     networkId: network?.id,
     indexedAccountId: indexedAccount?.id,
     filterNetworksWithoutAccount: true,
   });
 
   useEffect(() => {
-    const refresh = async () => {
+    const refreshAccountDataUpdate = async () => {
+      if (shouldEnableCompatQuery && !isDeferredReady) {
+        return;
+      }
+      await run({ alwaysSetState: true });
+    };
+    const refreshDeriveTypeChanged = async () => {
+      if (shouldEnableCompatQuery && !isDeferredReady) {
+        return;
+      }
       await run({ alwaysSetState: true });
     };
-    appEventBus.on(EAppEventBusNames.NetworkDeriveTypeChanged, refresh);
-    appEventBus.on(EAppEventBusNames.AccountDataUpdate, refresh);
+    appEventBus.on(
+      EAppEventBusNames.NetworkDeriveTypeChanged,
+      refreshDeriveTypeChanged,
+    );
+    appEventBus.on(
+      EAppEventBusNames.AccountDataUpdate,
+      refreshAccountDataUpdate,
+    );
     return () => {
-      appEventBus.off(EAppEventBusNames.NetworkDeriveTypeChanged, refresh);
-      appEventBus.off(EAppEventBusNames.AccountDataUpdate, refresh);
+      appEventBus.off(
+        EAppEventBusNames.NetworkDeriveTypeChanged,
+        refreshDeriveTypeChanged,
+      );
+      appEventBus.off(
+        EAppEventBusNames.AccountDataUpdate,
+        refreshAccountDataUpdate,
+      );
     };
-  }, [run]);
+  }, [isDeferredReady, run, shouldEnableCompatQuery]);
 
   const handleOnPress = useCallback(() => {
     navigation.pushModal(EModalRoutes.ChainSelectorModal, {

packages/kit/src/components/AccountSelector/hooks/useAutoSelectAccount.tsx

@@ -5,8 +5,12 @@ import {
   appEventBus,
 } from '@onekeyhq/shared/src/eventBus/appEventBus';
 import timerUtils from '@onekeyhq/shared/src/utils/timerUtils';
-import { EAccountSelectorAutoSelectTriggerBy } from '@onekeyhq/shared/types';
+import {
+  EAccountSelectorAutoSelectTriggerBy,
+  EAccountSelectorSceneName,
+} from '@onekeyhq/shared/types';
 
+import { deferHeavyWorkUntilUIIdle } from '../../../utils/deferHeavyWork';
 import {
   useAccountSelectorActions,
   useAccountSelectorSceneInfo,
@@ -28,7 +32,22 @@ export function useAutoSelectAccount({ num }: { num: number }) {
     if (!storageReady || !activeAccountReady) {
       return;
     }
-    void actions.current.autoSelectNextAccount({ num, sceneName, sceneUrl });
+    let cancelled = false;
+    const run = async () => {
+      if (sceneName === EAccountSelectorSceneName.home) {
+        await deferHeavyWorkUntilUIIdle();
+        if (cancelled) return;
+      }
+      await actions.current.autoSelectNextAccount({
+        num,
+        sceneName,
+        sceneUrl,
+      });
+    };
+    void run();
+    return () => {
+      cancelled = true;
+    };
   }, [actions, activeAccountReady, num, sceneName, sceneUrl, storageReady]);
 
   // **** autoSelectAccount after WalletUpdate

packages/kit/src/components/TokenListView/index.tsx

@@ -114,6 +114,7 @@ type IProps = {
   searchKeyLengthThreshold?: number;
   plainMode?: boolean;
   limit?: number;
+  deferTokenManagement?: boolean;
 };
 
 function TokenListViewCmp(props: IProps) {
@@ -154,6 +155,7 @@ function TokenListViewCmp(props: IProps) {
     searchKeyLengthThreshold,
     plainMode,
     limit,
+    deferTokenManagement,
   } = props;
 
   const intl = useIntl();
@@ -176,10 +178,13 @@ function TokenListViewCmp(props: IProps) {
   const [searchKey] = useSearchKeyAtom();
   const [activeAccountTokenListState] = useActiveAccountTokenListStateAtom();
 
+  const tokenManagementEnabled =
+    !deferTokenManagement || tokenListState.initialized;
   const { customTokens } = useTokenManagement({
     accountId,
     networkId,
     indexedAccountId,
+    enabled: tokenManagementEnabled,
   });
 
   const tokens = useMemo(() => {