Fix footer market stats (#1976)

* fix footer market stats

* add loader component

src/components/Footer/MarketStats/index.tsx

@@ -16,6 +16,7 @@ import Markdown from '@shared/Markdown'
 import content from '../../../../content/footer.json'
 import { getTotalAllocatedAndLocked } from '@utils/veAllocation'
 import PriceUnit from '@shared/Price/PriceUnit'
+import Loader from '@components/@shared/atoms/Loader'
 
 const initialTotal: StatsTotal = {
   nfts: 0,
@@ -25,6 +26,14 @@ const initialTotal: StatsTotal = {
   veLocked: 0
 }
 
+function LoaderArea() {
+  return (
+    <div className={styles.loaderWrap}>
+      <Loader />
+    </div>
+  )
+}
+
 export default function MarketStats(): ReactElement {
   const { appConfig } = useMarketMetadata()
   const { networksList } = useNetworkMetadata()
@@ -33,6 +42,7 @@ export default function MarketStats(): ReactElement {
     [chainId: number]: FooterStatsValuesGlobalStatistics
   }>()
   const [total, setTotal] = useState(initialTotal)
+  const [loading, setLoading] = useState<boolean>(false)
 
   //
   // Set the main chain ids we want to display stats for
@@ -72,15 +82,16 @@ export default function MarketStats(): ReactElement {
         LoggerInstance.error('Error fetching global stats: ', error.message)
       }
     }
-
-    const veTotals = await getTotalAllocatedAndLocked()
-    total.veAllocated = veTotals.totalAllocated
-    total.veLocked = veTotals.totalLocked
-    setTotal(total)
-
     setData(newData)
   }, [mainChainIds])
 
+  async function addVeTotals(partialTotals: StatsTotal) {
+    const total: StatsTotal = { ...partialTotals }
+    const veTotals = await getTotalAllocatedAndLocked()
+    total.veAllocated = veTotals.totalAllocated
+    total.veLocked = veTotals.totalLocked
+    return total
+  }
   //
   // 1. Fetch Data
   //
@@ -93,6 +104,7 @@ export default function MarketStats(): ReactElement {
   //
   useEffect(() => {
     if (!data || !mainChainIds?.length) return
+    setLoading(true)
     const newTotal: StatsTotal = total
 
     for (const chainId of mainChainIds) {
@@ -108,11 +120,16 @@ export default function MarketStats(): ReactElement {
         LoggerInstance.error('Error data manipulation: ', error.message)
       }
     }
-
-    setTotal(newTotal)
+    async function setTotalAllocatedAndLocked() {
+      setTotal(await addVeTotals(newTotal))
+      setLoading(false)
+    }
+    setTotalAllocatedAndLocked()
   }, [data, mainChainIds])
 
-  return (
+  return loading ? (
+    <LoaderArea />
+  ) : (
     <div className={styles.stats}>
       <div>
         <MarketStatsTotal total={total} />{' '}