Merge pull request #98 from BuidlerDAO/nig-654

fix: fix loading and empty state in Profile page
BuidlerDAO · Apr 1, 2024 · e7f0492 · e7f0492
2 parents 6d4eec7 + 83cbb44
commit e7f0492
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 14 deletions.
diff --git a/src/components/Loading/index.tsx b/src/components/Loading/index.tsx
@@ -5,4 +5,12 @@ const Loading = () => {
   return <CircularProgress />;
 };
 
+export const CenterLoading = () => {
+  return (
+    <div className="flex h-[200px] flex-col items-center justify-center space-x-2">
+      <CircularProgress />
+    </div>
+  );
+};
+
 export default Loading;
diff --git a/src/welcome/Profile/Explore.tsx b/src/welcome/Profile/Explore.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useRef } from 'react';
 import TabContext from '@mui/lab/TabContext';
 import TabList from '@mui/lab/TabList';
 import TabPanel from '@mui/lab/TabPanel';
@@ -20,26 +20,41 @@ import { getTimeDistanceFromDate } from '../../utils';
 const Explore = () => {
   const list = Array(7).fill('');
   const { openProfile } = useProfileModal((state) => ({ ...state }));
-  const { run: getShareList, loading: loading1 } = useShareList();
-  const { run: getTopList, loading: loading2 } = useTopList();
-  const { run: getNewList, loading: loading3 } = useNewList();
-  const { run: getRecentList, loading: loading4 } = useRecentList();
+  const { run: getShareList, loading: loading4 } = useShareList();
+  const { run: getTopList, loading: loading1 } = useTopList();
+  const { run: getNewList, loading: loading2 } = useNewList();
+  const { run: getRecentList, loading: loading3 } = useRecentList();
   const { shareList, topList, newList, recentList } = useShareStore((state) => ({ ...state }));
 
   const [value, setValue] = React.useState('1');
+  const [loadingx, setLoadingx] = React.useState(true);
 
   const fetchMap: Record<any, any> = {
     1: getTopList,
-    2: getRecentList,
-    3: getNewList,
+    2: getNewList,
+    3: getRecentList,
     4: getShareList,
   };
 
   const handleChange = (event: React.SyntheticEvent, newValue: string) => {
+    setLoadingx(true);
     setValue(newValue);
     fetchMap[newValue]();
   };
 
+  const loadingRef = useRef(false);
+
+  useEffect(() => {
+    let timeout: any;
+
+    if (loading1 || loading2 || loading3 || loading4) {
+      setLoadingx(true);
+      timeout = setTimeout(() => {
+        setLoadingx(false);
+      }, 500);
+    }
+  }, [loading1, loading2, loading3, loading4]);
+
   useEffect(() => {
     fetchMap[value]();
   }, []);
@@ -109,7 +124,7 @@ const Explore = () => {
           </TabList>
         </Box>
         <>
-          {loading1 || loading2 || loading3 || loading4 ? (
+          {loading1 || loading2 || loading3 || loading4 || loadingx ? (
             <div className="flex flex-1 items-center justify-center">
               <Loading />
             </div>

diff --git a/src/welcome/Wallet/Profile.tsx b/src/welcome/Wallet/Profile.tsx
@@ -8,7 +8,7 @@ import TableHead from '@mui/material/TableHead';
 import TableRow from '@mui/material/TableRow';
 import { useToggle } from 'ahooks';
 import dayjs from 'dayjs';
-
+import { CenterLoading } from '../../components/Loading';
 import { BasicButton, PrimaryButton } from '../../components/Button';
 import TableEmptyWidget from '../../components/Empty';
 import Modal from '../../components/Modal';
@@ -19,7 +19,6 @@ import { useTweetList } from '../../service/tweet';
 import useProfileModal from '../../store/useProfileModal';
 import useShareStore from '../../store/useShareStore';
 import useTweetStore from '../../store/useTweetStore';
-
 import BuyModal from './BuyModal';
 import SellModal from './SellModal';
 
@@ -226,7 +225,9 @@ const ProfileModal = () => {
                 marginTop: 2,
               }}
             >
-              {rows == null || rows.length === 0 ? (
+              {isGetHolderListLoading ? (
+                <CenterLoading />
+              ) : rows == null || rows?.length === 0 ? (
                 <TableEmptyWidget
                   containerClassName="pt-[30px] pb-[30px]"
                   label="No holders yet."
@@ -241,7 +242,7 @@ const ProfileModal = () => {
                     </TableRow>
                   </TableHead>
                   <TableBody>
-                    {rows.map((row, i) => (
+                    {rows?.map((row, i) => (
                       <TableRow key={i} sx={{ '&:last-child td, &:last-child th': { border: 0 } }}>
                         <TableCell component="th" scope="row">
                           {row.holder}
@@ -276,7 +277,9 @@ const ProfileModal = () => {
                 marginTop: 2,
               }}
             >
-              {holding == null || holding.length === 0 ? (
+              {isGetHolderListLoading ? (
+                <CenterLoading />
+              ) : holding == null || holding.length === 0 ? (
                 <TableEmptyWidget
                   containerClassName="pt-[30px] pb-[30px]"
                   label="No shares purchased yet."
@@ -326,7 +329,9 @@ const ProfileModal = () => {
                 marginTop: 2,
               }}
             >
-              {tweetList == null || tweetList.length === 0 ? (
+              {isGetTweetListLoading ? (
+                <CenterLoading />
+              ) : tweetList == null || tweetList.length === 0 ? (
                 <TableEmptyWidget
                   containerClassName="pt-[30px] pb-[30px]"
                   label="No records found. Vote to join weekly rankings."