Merge pull request #73 from QuickSwap/issue/app-performance-improvements

fix: show loading indicator on farm and dragon lair page
QuickSwap · Feb 5, 2022 · c3a5626 · c3a5626
2 parents 2593b72 + 097b51c
commit c3a5626
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 5 deletions.
diff --git 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
@@ -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} />