add a connection spinner to wallet connect button

components/ConnectWalletButton.tsx

@@ -26,13 +26,14 @@ import { useRouter } from 'next/router'
 import { PublicKey } from '@solana/web3.js'
 import { breakpoints } from '../components/TradePageGrid'
 import { useViewport } from 'hooks/useViewport'
+import Loading from './Loading'
 
 export const handleWalletConnect = (wallet: Wallet) => {
   if (!wallet) {
     return
   }
 
-  wallet?.adapter?.connect().catch((e) => {
+  return wallet?.adapter?.connect().catch((e) => {
     if (e.name.includes('WalletLoadError')) {
       notify({
         title: `${wallet.adapter.name} Error`,
@@ -50,6 +51,7 @@ export const ConnectWalletButton: React.FC = () => {
   const set = useMangoStore((s) => s.set)
   const mangoGroup = useMangoStore((s) => s.selectedMangoGroup.current)
   const [showAccountsModal, setShowAccountsModal] = useState(false)
+  const [connecting, setConnecting] = useState(false)
   const actions = useMangoStore((s) => s.actions)
   const profileDetails = useMangoStore((s) => s.profile.details)
   const loadProfileDetails = useMangoStore((s) => s.profile.loadDetails)
@@ -82,7 +84,8 @@ export const ConnectWalletButton: React.FC = () => {
 
   const handleConnect = useCallback(() => {
     if (wallet) {
-      handleWalletConnect(wallet)
+      setConnecting(true)
+      handleWalletConnect(wallet)?.then(() => setConnecting(false))
     }
   }, [wallet])
 
@@ -209,8 +212,8 @@ export const ConnectWalletButton: React.FC = () => {
             <div className="default-transition flex h-full flex-row items-center justify-center px-3">
               <WalletIcon className="mr-2 h-4 w-4 fill-current" />
               <div className="text-left">
-                <div className="mb-1 whitespace-nowrap font-bold leading-none">
-                  {t('connect')}
+                <div className="mb-1 flex justify-center whitespace-nowrap font-bold leading-none">
+                  {connecting ? <Loading className="h-4 w-4" /> : t('connect')}
                 </div>
                 {wallet?.adapter?.name && (
                   <div className="text-xxs font-normal leading-3 tracking-wider text-th-bkg-2">