connect wallet page loader

components/Layout.tsx

@@ -20,13 +20,14 @@ import UserSetupModal from './modals/UserSetupModal'
 import { ConnectWalletButton } from './wallet/ConnectWalletButton'
 import ConnectedMenu from './wallet/ConnectedMenu'
 import WalletIcon from './icons/WalletIcon'
+import BounceLoader from './shared/BounceLoader'
 
 export const IS_ONBOARDED_KEY = 'isOnboarded'
 
 const Layout = ({ children }: { children: ReactNode }) => {
   const mangoAccount = mangoStore((s) => s.mangoAccount.current)
+  const loadingMangoAccount = mangoStore((s) => s.mangoAccount.loading)
   const { t } = useTranslation('common')
-  const { connected } = useWallet()
   const [isCollapsed, setIsCollapsed] = useState(false)
   const { width } = useViewport()
   const isMobile = width ? width < breakpoints.md : false
@@ -60,66 +61,75 @@ const Layout = ({ children }: { children: ReactNode }) => {
   }
 
   return (
-    <div className={`flex-grow bg-th-bkg-1 text-th-fgd-1 transition-all`}>
-      <div className="flex">
-        {isMobile ? (
-          <div className="fixed bottom-0 left-0 z-20 w-full md:hidden">
-            <BottomBar />
-          </div>
-        ) : (
-          <div className={`fixed z-20 h-screen`}>
-            <button
-              className="absolute -right-4 top-1/2 z-20 hidden h-10 w-4 -translate-y-1/2 transform rounded-none rounded-r bg-th-bkg-4 focus:outline-none lg:block"
-              onClick={handleToggleSidebar}
-            >
-              <ChevronRightIcon
-                className={`default-transition h-full w-full ${
-                  !isCollapsed ? 'rotate-180' : 'rotate-360'
-                }`}
-              />
-            </button>
-            <div className={`h-full ${!isCollapsed ? 'overflow-y-auto' : ''}`}>
-              <SideNav collapsed={isCollapsed} />
+    <>
+      {loadingMangoAccount && isOnboarded ? (
+        <div className="fixed z-30 flex h-screen w-full items-center justify-center bg-[rgba(0,0,0,0.7)]">
+          <BounceLoader />
+        </div>
+      ) : null}
+      <div className={`flex-grow bg-th-bkg-1 text-th-fgd-1 transition-all`}>
+        <div className="flex">
+          {isMobile ? (
+            <div className="fixed bottom-0 left-0 z-20 w-full md:hidden">
+              <BottomBar />
             </div>
-          </div>
-        )}
-        <div
-          className={`w-full overflow-hidden transition-all duration-500 ease-in-out ${
-            isMobile ? '' : isCollapsed ? 'pl-[72px]' : 'pl-44 lg:pl-56'
-          }`}
-        >
-          <div className="flex h-16 items-center justify-between border-b border-th-bkg-3 bg-th-bkg-1 px-6">
-            <div className="flex items-center text-th-fgd-3">
-              <span className="mb-0 mr-2">
+          ) : (
+            <div className={`fixed z-20 h-screen`}>
+              <button
+                className="absolute -right-4 top-1/2 z-20 hidden h-10 w-4 -translate-y-1/2 transform rounded-none rounded-r bg-th-bkg-4 focus:outline-none lg:block"
+                onClick={handleToggleSidebar}
+              >
+                <ChevronRightIcon
+                  className={`default-transition h-full w-full ${
+                    !isCollapsed ? 'rotate-180' : 'rotate-360'
+                  }`}
+                />
+              </button>
+              <div
+                className={`h-full ${!isCollapsed ? 'overflow-y-auto' : ''}`}
+              >
+                <SideNav collapsed={isCollapsed} />
+              </div>
+            </div>
+          )}
+          <div
+            className={`w-full overflow-hidden transition-all duration-500 ease-in-out ${
+              isMobile ? '' : isCollapsed ? 'pl-[72px]' : 'pl-44 lg:pl-56'
+            }`}
+          >
+            <div className="flex h-16 items-center justify-between border-b border-th-bkg-3 bg-th-bkg-1 px-6">
+              <div className="flex items-center text-th-fgd-3">
+                <span className="mb-0 mr-2">
+                  {mangoAccount ? (
+                    <MangoAccountSummaryDropdown mangoAccount={mangoAccount} />
+                  ) : (
+                    <span className="flex items-center">
+                      🔗<span className="ml-2">{t('connect-helper')}</span>
+                      <ArrowRightIcon className="sideways-bounce ml-2 h-5 w-5 text-th-fgd-1" />
+                    </span>
+                  )}
+                </span>
+              </div>
+              <div className="flex items-center space-x-4">
                 {mangoAccount ? (
-                  <MangoAccountSummaryDropdown mangoAccount={mangoAccount} />
+                  <ConnectedMenu />
+                ) : isOnboarded ? (
+                  <ConnectWalletButton />
                 ) : (
-                  <span className="flex items-center">
-                    🔗<span className="ml-2">{t('connect-helper')}</span>
-                    <ArrowRightIcon className="sideways-bounce ml-2 h-5 w-5 text-th-fgd-1" />
-                  </span>
+                  <button
+                    className="relative flex h-16 items-center justify-center rounded-none bg-gradient-to-bl from-mango-theme-yellow to-mango-theme-red-dark px-6 text-base font-bold text-white before:absolute before:inset-0 before:bg-gradient-to-r before:from-transparent before:via-[rgba(255,255,255,0.25)] before:to-transparent before:opacity-0 hover:cursor-pointer hover:overflow-hidden hover:before:-translate-x-full hover:before:animate-[shimmer_0.75s_normal] hover:before:opacity-100"
+                    onClick={handleShowModal}
+                  >
+                    <WalletIcon className="mr-2 h-5 w-5 flex-shrink-0" />
+                    {t('connect')}
+                  </button>
                 )}
-              </span>
+              </div>
             </div>
-            <div className="flex items-center space-x-4">
-              {mangoAccount ? (
-                <ConnectedMenu />
-              ) : isOnboarded ? (
-                <ConnectWalletButton />
-              ) : (
-                <button
-                  className="relative flex h-16 items-center justify-center rounded-none bg-gradient-to-bl from-mango-theme-yellow to-mango-theme-red-dark px-6 text-base font-bold text-white before:absolute before:inset-0 before:bg-gradient-to-r before:from-transparent before:via-[rgba(255,255,255,0.25)] before:to-transparent before:opacity-0 hover:cursor-pointer hover:overflow-hidden hover:before:-translate-x-full hover:before:animate-[shimmer_0.75s_normal] hover:before:opacity-100"
-                  onClick={handleShowModal}
-                >
-                  <WalletIcon className="mr-2 h-5 w-5 flex-shrink-0" />
-                  {t('connect')}
-                </button>
-              )}
+            <div className={`min-h-screen p-8 ${isMobile ? 'pb-20' : ''}`}>
+              {children}
             </div>
           </div>
-          <div className={`min-h-screen p-8 ${isMobile ? 'pb-20' : ''}`}>
-            {children}
-          </div>
         </div>
       </div>
       {showUserSetupModal ? (
@@ -128,7 +138,7 @@ const Layout = ({ children }: { children: ReactNode }) => {
           onClose={handleCloseModal}
         />
       ) : null}
-    </div>
+    </>
   )
 }