more graceful loading

packages/app-extension/src/app/Router.tsx

@@ -20,6 +20,7 @@ import {
   useApprovedOrigins,
   useBackgroundClient,
   useBackgroundResponder,
+  useBootstrapFast,
   useDarkMode,
   useEnabledBlockchains,
   useKeyringStoreState,
@@ -421,6 +422,7 @@ function WithLockMotion({ children, id }: any) {
 }
 
 function LockedBootstrap({ onUnlock }: any) {
+  useBootstrapFast();
   return <Locked onUnlock={onUnlock} />;
 }
 

packages/app-extension/src/components/Unlocked/Balances/RecentActivity.tsx

@@ -66,11 +66,7 @@ function RecentTransactions({
     extractTime(a) > extractTime(b) ? -1 : 1
   );
 
-  return (
-    <Suspense fallback={null}>
-      <BlockchainActivityList transactions={sortedTransactions} />
-    </Suspense>
-  );
+  return <BlockchainActivityList transactions={sortedTransactions} />;
 }
 
 export function RecentActivityList({

packages/app-extension/src/components/Unlocked/Balances/TransferWidget.tsx

@@ -1,6 +1,5 @@
-import React from "react";
-import type {
-  Blockchain} from "@coral-xyz/common";
+import React, { Suspense } from "react";
+import type { Blockchain } from "@coral-xyz/common";
 import {
   ETH_NATIVE_MINT,
   SOL_NATIVE_MINT,
@@ -115,9 +114,10 @@ function SwapButton({
   };
 
   const _SwapButtonIfTheTokenIsSwappable = () => {
-    // This component loads inside Suspense, so it should not block
-    // rendering as we wait for Jupiter Routes to be downloaded and parsed
-    const { canSwap } = useSwapContext();
+    const { canSwap, isLoading } = useSwapContext();
+    if (isLoading) {
+      return <SwapButtonComponent />;
+    }
     return canSwap ? (
       <SwapButtonComponent
         routes={[

packages/app-extension/src/components/Unlocked/Swap.tsx

@@ -24,8 +24,8 @@ import type {
   TokenDataWithPrice,
 } from "@coral-xyz/recoil";
 import {
-  SwapState,
   SwapProvider,
+  SwapState,
   useActiveWallet,
   useBackgroundClient,
   useDarkMode,
@@ -144,8 +144,8 @@ const useStyles = styles((theme) => ({
     justifyContent: "center",
     flexDirection: "column",
     borderRadius: "22px",
-    position: "fixed",
-    top: 175,
+    position: "absolute",
+    top: 120,
     left: 24,
   },
   switchTokensButton: {

packages/app-extension/src/components/Unlocked/index.tsx

@@ -1,8 +1,7 @@
-import { Suspense } from "react";
 import { ApolloProvider, SuspenseCache } from "@apollo/client";
 import { createApolloClient } from "@coral-xyz/common";
 import { Loading } from "@coral-xyz/react-common";
-import { useAuthenticatedUser } from "@coral-xyz/recoil";
+import { useAuthenticatedUser, useBootstrapFast } from "@coral-xyz/recoil";
 
 import { Spotlight } from "../../spotlight/Spotlight";
 import { Router } from "../common/Layout/Router";
@@ -19,6 +18,7 @@ const suspenseCache = new SuspenseCache();
 // The main nav persistent stack.
 //
 export function Unlocked() {
+  useBootstrapFast();
   const user = useAuthenticatedUser();
   if (!user) {
     return <Loading />;

packages/app-extension/src/components/common/Layout/Router.tsx

@@ -95,18 +95,28 @@ export function Router() {
 }
 
 function NotificationsPage() {
-  const gates = useFeatureGates();
-  const _Component = gates.GQL_NOTIFICATIONS
-    ? Notifications
-    : LegacyNotifications;
+  const _Component = () => {
+    const gates = useFeatureGates();
+    return gates.GQL_NOTIFICATIONS ? (
+      <Notifications />
+    ) : (
+      <LegacyNotifications />
+    );
+  };
   return <NavScreen component={<_Component />} />;
 }
 
 function TransactionsPage() {
-  const gates = useFeatureGates();
-  const _Component = gates.GQL_TRANSACTION_HISTORY
-    ? Transactions
-    : LegacyTransactions;
+  const _Component = () => {
+    const gates = useFeatureGates();
+
+    return gates.GQL_TRANSACTION_HISTORY ? (
+      <Transactions />
+    ) : (
+      <LegacyTransactions />
+    );
+  };
+
   return <NavScreen component={<_Component />} />;
 }
 

packages/app-extension/src/components/common/Layout/Tab.tsx

@@ -16,6 +16,7 @@ import { useUnreadGlobal } from "@coral-xyz/db";
 import {
   BalancesIcon,
   GridIcon,
+  ImageIcon,
   Loading,
   MessageBubbleIcon,
   SwapIcon,
@@ -350,7 +351,7 @@ function TabBarXl() {
             onClick={() => onTabClick(TAB_TOKENS)}
             value={TAB_TOKENS}
             disableRipple
-            className={`${isXs ? classes.tabXs : classes.tab} ${
+            className={`${classes.tab} ${
               tab === TAB_TOKENS ? classes.activeTab : ""
             }`}
             icon={
@@ -367,6 +368,44 @@ function TabBarXl() {
               />
             }
           />
+          <Tab
+            onClick={() => onTabClick(TAB_NFTS)}
+            value={TAB_NFTS}
+            disableRipple
+            className={`${classes.tab} ${
+              tab === TAB_NFTS ? classes.activeTab : ""
+            }`}
+            icon={
+              <ImageIcon
+                fill={
+                  tab === TAB_NFTS
+                    ? theme.custom.colors.brandColor
+                    : theme.custom.colors.icon
+                }
+                style={{
+                  width: "20px",
+                  height: "20px",
+                }}
+              />
+            }
+          />
+          <Tab
+            onClick={() => onTabClick(TAB_SWAP)}
+            value={TAB_SWAP}
+            disableRipple
+            className={`${classes.tab} ${
+              tab === TAB_SWAP ? classes.activeTab : ""
+            }`}
+            icon={
+              <SwapIcon
+                fill={
+                  tab === TAB_SWAP
+                    ? theme.custom.colors.brandColor
+                    : theme.custom.colors.icon
+                }
+              />
+            }
+          />
           {featureGates["MESSAGING_ENABLED"] ? (
             <Tab
               onClick={() => onTabClick(TAB_MESSAGES)}
@@ -422,6 +461,25 @@ function TabBarXl() {
               />
             </>
           ) : null}
+          <Tab
+            onClick={() => onTabClick(TAB_APPS)}
+            value={TAB_APPS}
+            disableRipple
+            className={isXs ? classes.tabXs : classes.tab}
+            icon={
+              <GridIcon
+                fill={
+                  tab === TAB_APPS
+                    ? theme.custom.colors.brandColor
+                    : theme.custom.colors.icon
+                }
+                style={{
+                  width: "20px",
+                  height: "20px",
+                }}
+              />
+            }
+          />
         </div>
         {!isXs ? (
           <div

packages/recoil/src/context/Swap.tsx

@@ -18,14 +18,12 @@ import * as bs58 from "bs58";
 import { BigNumber, ethers, FixedNumber } from "ethers";
 
 import { blockchainTokenData } from "../atoms/balance";
-import { jupiterInputTokens } from "../atoms/solana/jupiter";
 import {
-  useFeatureGates,
-  useJupiterOutputTokens,
-  useJupiterTokenList,
-  useLoader,
-  useSolanaCtx,
-} from "../hooks";
+  jupiterInputTokens,
+  jupiterOutputTokens,
+  jupiterTokenList as jupiterTokenListAtom,
+} from "../atoms/solana/jupiter";
+import { useFeatureGates, useLoader, useSolanaCtx } from "../hooks";
 import type { TokenData, TokenDataWithBalance } from "../types";
 
 const { Zero } = ethers.constants;
@@ -110,6 +108,7 @@ export type SwapContext = {
   canSwap: boolean;
   canSwitch: boolean;
   isInDrawer: boolean;
+  isLoading: boolean;
 };
 
 const _SwapContext = React.createContext<SwapContext | null>(null);
@@ -139,16 +138,19 @@ export function SwapProvider({
   const blockchain = Blockchain.SOLANA; // Solana only at the moment.
   const solanaCtx = useSolanaCtx();
   const { backgroundClient, connection, walletPublicKey } = solanaCtx;
-  const jupiterTokenList = useJupiterTokenList();
+  const [jupiterTokenList, jupiterTokenlistState] = useLoader(
+    jupiterTokenListAtom,
+    []
+  );
   const { SWAP_FEES_ENABLED } = useFeatureGates();
   const JUPITER_BASE_URL = SWAP_FEES_ENABLED
     ? "https://jupiter.xnfts.dev/v4/"
     : "https://quote-api.jup.ag/v4/";
-  const [fromTokens] = useLoader(
+  const [fromTokens, state] = useLoader(
     jupiterInputTokens({ publicKey: walletPublicKey.toString() }),
     []
   );
-  const [token] = tokenAddress
+  const [token, _state] = tokenAddress
     ? // TODO: refactor so this hook isn't behind a conditional
       // eslint-disable-next-line react-hooks/rules-of-hooks
       useLoader(
@@ -159,7 +161,7 @@ export function SwapProvider({
         }),
         undefined
       )
-    : [undefined];
+    : [undefined, "hasValue"];
 
   // Swap setttings
   const [[fromMint, toMint], setFromMintToMint] = useState([
@@ -250,7 +252,11 @@ export function SwapProvider({
     }
   }
 
-  const toTokens = useJupiterOutputTokens(fromMint);
+  //  const toTokens = useJupiterOutputTokens(fromMint);
+  const [toTokens, toTokensState] = useLoader(
+    jupiterOutputTokens({ inputMint: fromMint }),
+    []
+  );
   const toToken = toTokens.find((t) => t.mint === toMint);
 
   let availableForSwap = fromToken
@@ -573,6 +579,13 @@ export function SwapProvider({
         canSwap: !availableForSwap.isZero(),
         canSwitch,
         isInDrawer,
+        isLoading:
+          state === "loading" ||
+          _state === "loading" ||
+          jupiterTokenlistState === "loading" ||
+          toTokensState === "loading" ||
+          isLoadingRoutes ||
+          isLoadingTransactions,
       }}
     >
       {children}

packages/recoil/src/hooks/bootstrap.tsx

@@ -2,6 +2,25 @@ import { useRecoilValue } from "recoil";
 
 import * as atoms from "../atoms";
 
+import { useKeyringStoreState } from "./keyring";
+import { useNavigation, useTab } from "./navigation";
+import { useAllUsers } from "./preferences";
+import { useSolanaCommitment } from "./solana";
+import { useAllWalletsDisplayed } from "./wallet";
+
+export function useBootstrapFast() {
+  useRecoilValue(atoms.bootstrapFast);
+
+  // Hack: load all the navigation atoms to prevent UI flickering.
+  //       TODO: can batch these into a single request to the background script.
+  useTab();
+  useNavigation();
+  useKeyringStoreState();
+  useSolanaCommitment();
+  useAllUsers();
+  useAllWalletsDisplayed();
+}
+
 export function useRedirectUrl(): string {
   return useRecoilValue(atoms.navCurrentUrl);
 }