fix animation sometimes not working

components/home/HomePage.tsx

@@ -23,6 +23,7 @@ import HeroStat from './HeroStat'
 import useMarketsData from '../../hooks/useMarketData'
 import { useQuery } from '@tanstack/react-query'
 import { MANGO_DATA_API_URL } from '../../utils/constants'
+import Loading from '../shared/Loading'
 
 gsap.registerPlugin(MotionPathPlugin)
 gsap.registerPlugin(ScrollTrigger)
@@ -367,33 +368,39 @@ const HomePage = () => {
           />
         </div>
       </SectionWrapper>
-      {formattedSpotData.length && formattedPerpData.length ? (
-        <SectionWrapper className="border-t border-th-bkg-3">
-          <div className="w-full h-full">
-            <h2 className="mb-4 text-center">{t('markets')}</h2>
-            <p className="mb-10 intro-p text-center max-w-lg mx-auto">
-              {t('home:markets-desc')}
-            </p>
-            <div className="flex justify-center pb-10">
-              <TabsText
-                activeTab={activeMarketTab}
-                className="text-2xl"
-                onChange={setActiveMarketTab}
-                tabs={tabsWithCount}
-              />
-            </div>
-            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 max-h-[580px] overflow-auto thin-scroll">
-              {activeMarketTab === 'spot'
-                ? formattedSpotData.map((data) => (
-                    <MarketCard marketData={data} key={data.name} />
-                  ))
-                : formattedPerpData.map((data) => (
-                    <MarketCard marketData={data} key={data.name} />
-                  ))}
-            </div>
+      <SectionWrapper className="border-t border-th-bkg-3">
+        <div className="w-full h-full">
+          <h2 className="mb-4 text-center">{t('markets')}</h2>
+          <p className="mb-10 intro-p text-center max-w-lg mx-auto">
+            {t('home:markets-desc')}
+          </p>
+          <div className="flex justify-center pb-10">
+            <TabsText
+              activeTab={activeMarketTab}
+              className="text-2xl"
+              onChange={setActiveMarketTab}
+              tabs={tabsWithCount}
+            />
           </div>
-        </SectionWrapper>
-      ) : null}
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 h-[580px] overflow-auto thin-scroll">
+            {!loadingMarketData ? (
+              activeMarketTab === 'spot' ? (
+                formattedSpotData.map((data) => (
+                  <MarketCard marketData={data} key={data.name} />
+                ))
+              ) : (
+                formattedPerpData.map((data) => (
+                  <MarketCard marketData={data} key={data.name} />
+                ))
+              )
+            ) : (
+              <div className="h-full col-span-4 border border-th-bkg-3 rounded-xl flex items-center justify-center">
+                <Loading className="text-th-fgd-1" />
+              </div>
+            )}
+          </div>
+        </div>
+      </SectionWrapper>
       <div className="bg-[url('/images/new/stage-slice.png')] bg-repeat-x bg-contain">
         <SectionWrapper className="relative overflow-hidden">
           <ColorBlur

components/shared/Loading.tsx

@@ -0,0 +1,26 @@
+const Loading = ({ className = '' }: { className?: string }) => {
+  return (
+    <svg
+      className={`${className} h-5 w-5 animate-spin`}
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+    >
+      <circle
+        className={`opacity-25`}
+        cx="12"
+        cy="12"
+        r="10"
+        stroke="currentColor"
+        strokeWidth="4"
+      ></circle>
+      <path
+        className={`opacity-75`}
+        fill="currentColor"
+        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+      ></path>
+    </svg>
+  )
+}
+
+export default Loading