bug fix, smoother loading

Author: aalavandhan

frontend/src/components/GeyserFirst/GeyserStakeView.tsx

@@ -53,6 +53,7 @@ export const GeyserStakeView = () => {
     vaultStats: { currentStakeable },
   } = useContext(StatsContext)
   const { connectWallet, ready } = useContext(Web3Context)
+
   const currentStakeAmount = BigNumber.from(ready && currentLock ? currentLock.amount : '0')
   const [unstakeConfirmModalOpen, setUnstakeConfirmModalOpen] = useState<boolean>(false)
   const [actualRewardsFromUnstake, setActualRewardsFromUnstake] = useState<BigNumber>(BigNumber.from('0'))

frontend/src/components/GeyserFirst/UserBalance.tsx

@@ -1,7 +1,8 @@
 import { BigNumber, BigNumberish } from 'ethers'
 import styled from 'styled-components/macro'
 import tw from 'twin.macro'
-import { formatAmount } from 'utils/amount'
+import { formatUnits } from 'ethers/lib/utils'
+import { formatTokenBalance } from 'utils/amount'
 
 interface Props {
   parsedAmount: BigNumber
@@ -22,7 +23,7 @@ export const UserBalance: React.FC<Props> = ({
 }) => {
   const formatDisplayAmount = (amt: BigNumberish, sym: string) => (
     <BalLink href={poolAddress} target="_blank" rel="noreferrer">
-      {formatAmount(amt, decimals)} {sym}
+      {formatTokenBalance(formatUnits(amt, decimals))} {sym}
     </BalLink>
   )
 

frontend/src/components/Home.tsx

@@ -163,7 +163,7 @@ const InfoText = styled.div`
 `
 
 const LoaderContainer = styled.div`
-  ${tw`flex items-center justify-center w-full m-5`}
+  ${tw`m-auto my-4 flex flex-col flex-wrap w-full items-center justify-center`}
 `
 
 export default Home

frontend/src/components/PageLoader.css

@@ -1,8 +1,16 @@
 .GenericProgress-Container {
-  background: #fff;
+  position: fixed; /* Cover the entire viewport */
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(255, 255, 255, 0.8); /* Transparent white background */
   color: #000;
-  text-align: center;
-  margin: 75px auto;
+  display: flex; /* Flexbox for loader placement */
+  align-items: flex-start; /* Align loader to the top */
+  justify-content: center; /* Center loader horizontally */
+  padding-top: 250px; /* Add some space from the top */
+  z-index: 9999; /* Ensure it is above all other elements */
 }
 
 .page-loader {
@@ -25,6 +33,7 @@
 .page-loader:after {
   scale: -1;
 }
+
 @keyframes l10 {
   50% {
     clip-path: inset(0);

frontend/src/components/WelcomeHero.tsx

@@ -54,7 +54,7 @@ const WelcomeHero = ({ tvl, totalRewards }) => {
 }
 
 const CalloutBox = styled.div`
-  ${tw`justify-around flex flex-col`}
+  ${tw`justify-around flex flex-col w-full`}
   ${tw`bg-black text-white p-8 rounded-lg text-md font-mono bg-opacity-90`}
   ${tw`mb-10`}
 `
@@ -97,7 +97,7 @@ const Hr = styled.hr`
   ${tw`border-t border-white w-full`}
 `
 const LoaderContainer = styled.div`
-  ${tw`flex items-center justify-center w-full m-5 mt-11 mb-10`}
+  ${tw`flex items-center justify-center w-full mt-11 mb-10`}
 `
 
 export default WelcomeHero

frontend/src/components/WelcomeMessage.tsx

@@ -29,7 +29,7 @@ export const WelcomeMessage = () => (
 )
 
 const Container = styled.div`
-  ${tw`w-full max-w-4xl mx-auto my-8 px-4`}
+  ${tw`w-full my-8 px-4`}
 `
 
 const Title = styled.h1`

frontend/src/context/VaultContext.tsx

@@ -79,12 +79,15 @@ export const VaultContextProvider: React.FC = ({ children }) => {
   useEffect(() => {
     if (address) {
       console.log('vault refresh')
+      setVaults([])
+      setSelectedVault(null)
+      setCurrentLock(null)
       getVaults({ variables: { id: address.toLowerCase() } })
     }
-  }, [networkId, address, getVaults])
+  }, [ready, networkId, address, getVaults])
 
   useEffect(() => {
-    if (ready && !!vaultData && !!vaultData.user) {
+    if (ready && vaultData?.user) {
       const userVaults = vaultData.user.vaults as Vault[]
       setVaults(userVaults)
       if (userVaults.length > 0 && !selectedVault) {
@@ -95,19 +98,17 @@ export const VaultContextProvider: React.FC = ({ children }) => {
         setSelectedVault(null)
       }
     }
-    if (!ready) {
-      setVaults([])
-      setSelectedVault(null)
-    }
   }, [vaultData, selectedVault])
 
   useEffect(() => {
-    if (selectedVault && selectedGeyser) {
+    if (address && selectedVault && selectedGeyser) {
       const { stakingToken } = selectedGeyser
       const lockId = `${selectedVault.id}-${selectedGeyser.id}-${stakingToken}`
       setCurrentLock(selectedVault.locks.find((lock) => lock.id === lockId) || null)
+    } else {
+      setCurrentLock(null)
     }
-  }, [selectedVault, selectedGeyser])
+  }, [address, selectedVault, selectedGeyser])
 
   return (
     <VaultContext.Provider