From a620baeec886759d03c74f42b7b618bc19f53af8 Mon Sep 17 00:00:00 2001
From: Bogdan Fazakas <bogdan.fazakas@gmail.com>
Date: Wed, 11 Oct 2023 10:21:34 +0300
Subject: [PATCH 1/2] fix footer market stats

---
 src/components/Footer/MarketStats/index.tsx | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/components/Footer/MarketStats/index.tsx b/src/components/Footer/MarketStats/index.tsx
index fda00e1e1a..3581a045b0 100644
--- a/src/components/Footer/MarketStats/index.tsx
+++ b/src/components/Footer/MarketStats/index.tsx
@@ -72,15 +72,16 @@ export default function MarketStats(): ReactElement {
         LoggerInstance.error('Error fetching global stats: ', error.message)
       }
     }
+    setData(newData)
+  }, [mainChainIds])
 
+  async function addVeTotals(partialTotals: StatsTotal) {
+    const total: StatsTotal = { ...partialTotals }
     const veTotals = await getTotalAllocatedAndLocked()
     total.veAllocated = veTotals.totalAllocated
     total.veLocked = veTotals.totalLocked
-    setTotal(total)
-
-    setData(newData)
-  }, [mainChainIds])
-
+    return total
+  }
   //
   // 1. Fetch Data
   //
@@ -108,8 +109,10 @@ export default function MarketStats(): ReactElement {
         LoggerInstance.error('Error data manipulation: ', error.message)
       }
     }
-
-    setTotal(newTotal)
+    async function setTotalAllocatedAndLocked() {
+      setTotal(await addVeTotals(newTotal))
+    }
+    setTotalAllocatedAndLocked()
   }, [data, mainChainIds])
 
   return (

From d3e32f103398160d338989dd4631552352308c6d Mon Sep 17 00:00:00 2001
From: Bogdan Fazakas <bogdan.fazakas@gmail.com>
Date: Fri, 13 Oct 2023 12:49:41 +0300
Subject: [PATCH 2/2] add loader component

---
 src/components/Footer/MarketStats/index.tsx | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/components/Footer/MarketStats/index.tsx b/src/components/Footer/MarketStats/index.tsx
index 3581a045b0..00a6d2b06e 100644
--- a/src/components/Footer/MarketStats/index.tsx
+++ b/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
@@ -94,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) {
@@ -111,11 +122,14 @@ export default function MarketStats(): ReactElement {
     }
     async function setTotalAllocatedAndLocked() {
       setTotal(await addVeTotals(newTotal))
+      setLoading(false)
     }
     setTotalAllocatedAndLocked()
   }, [data, mainChainIds])
 
-  return (
+  return loading ? (
+    <LoaderArea />
+  ) : (
     <div className={styles.stats}>
       <div>
         <MarketStatsTotal total={total} />{' '}