From 097b51c74f1419f455bdc30fc7a90fd60b7630c1 Mon Sep 17 00:00:00 2001
From: Aamir Alam <aamiralam1991@gmail.com>
Date: Fri, 4 Feb 2022 18:00:12 +0530
Subject: [PATCH] fix: show loading indicator on farm and dragon lair page

---
 src/pages/DragonPage/DragonsSyrup.tsx | 10 ++++++++--
 src/pages/FarmPage/FarmPage.tsx       | 15 ++++++++++++---
 2 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/src/pages/DragonPage/DragonsSyrup.tsx b/src/pages/DragonPage/DragonsSyrup.tsx
index d378855cc..2b7f838a5 100644
--- a/src/pages/DragonPage/DragonsSyrup.tsx
+++ b/src/pages/DragonPage/DragonsSyrup.tsx
@@ -411,10 +411,16 @@ const DragonsSyrup: React.FC = () => {
           </>
         )}
       </Box>
-      {syrupInfos ? (
+      {syrupInfos && !pageLoading ? (
         syrupInfos.map((syrup, ind) => <SyrupCard key={ind} syrup={syrup} />)
       ) : (
-        <Skeleton width='100%' height={80} />
+        <>
+          <Skeleton width='100%' height={120} />
+          <Skeleton width='100%' height={120} />
+          <Skeleton width='100%' height={120} />
+          <Skeleton width='100%' height={120} />
+          <Skeleton width='100%' height={120} />
+        </>
       )}
       <div ref={loadMoreRef} />
     </>
diff --git a/src/pages/FarmPage/FarmPage.tsx b/src/pages/FarmPage/FarmPage.tsx
index 6a4c6f2e5..e461eec67 100755
--- a/src/pages/FarmPage/FarmPage.tsx
+++ b/src/pages/FarmPage/FarmPage.tsx
@@ -737,7 +737,9 @@ const FarmPage: React.FC = () => {
             </Box>
           </Box>
         )}
-        {farmIndex === GlobalConst.farmIndex.LPFARM_INDEX && stakingInfos ? (
+        {farmIndex === GlobalConst.farmIndex.LPFARM_INDEX &&
+        stakingInfos &&
+        !pageloading ? (
           stakingInfos.map((info: StakingInfo, index) => (
             <FarmLPCard
               key={index}
@@ -747,7 +749,8 @@ const FarmPage: React.FC = () => {
             />
           ))
         ) : farmIndex === GlobalConst.farmIndex.DUALFARM_INDEX &&
-          stakingDualInfos ? (
+          stakingDualInfos &&
+          !pageloading ? (
           stakingDualInfos.map((info: DualStakingInfo, index) => (
             <FarmDualCard
               key={index}
@@ -757,7 +760,13 @@ const FarmPage: React.FC = () => {
             />
           ))
         ) : (
-          <Skeleton width='100%' height={80} />
+          <>
+            <Skeleton width='100%' height={100} />
+            <Skeleton width='100%' height={100} />
+            <Skeleton width='100%' height={100} />
+            <Skeleton width='100%' height={100} />
+            <Skeleton width='100%' height={100} />
+          </>
         )}
       </Box>
       <div ref={loadMoreRef} />