fix: fix reward & profile loading

BuidlerDAO · Apr 2, 2024 · 066091c · 066091c
1 parent 03516ef
commit 066091c
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 8 deletions.
diff --git a/src/welcome/Profile/Reward.tsx b/src/welcome/Profile/Reward.tsx
@@ -7,7 +7,7 @@ import Box from '@mui/material/Box';
 import Tab from '@mui/material/Tab';
 import { useAsyncEffect } from 'ahooks';
 import dayjs from 'dayjs';
-
+import { CenterLoading } from '../../components/Loading';
 import { ListEmpty } from '../../components/Empty';
 import { NumberDisplayer } from '../../components/NumberDisplayer';
 import { useTweetList, useTweetYourRank } from '../../service/tweet';
@@ -44,11 +44,12 @@ const Reward = () => {
   const [priceMap, setPriceMap] = useState<Record<string, any>>([]);
   const [value, setValue] = React.useState('1');
   const [poolBalance, setPoolBalance] = React.useState('0');
-  const { run: getTweet } = useTweetList();
-  const { run: getYourRank } = useTweetYourRank();
+  const { run: getTweet, loading: loadingTweetList } = useTweetList();
+  const { run: getYourRank, loading: loadingTweetYourRank } = useTweetYourRank();
   const { tweetList, tweetRewardTotalRewardAmount, tweetYourRank } = useTweetStore((state) => ({
     ...state,
   }));
+  const [loadingx, setLoadingx] = useState(true);
   const { userInfo } = useUserStore((state) => ({ ...state }));
   const currentIndex = tweetList
     ? tweetList?.findIndex((item) => item.author?.twitterId === userInfo?.twitterId)
@@ -83,6 +84,17 @@ const Reward = () => {
     fetchPool();
   }, []);
 
+  useEffect(() => {
+    let timeout: any;
+
+    if (loadingTweetList || loadingTweetYourRank) {
+      setLoadingx(true);
+      timeout = setTimeout(() => {
+        setLoadingx(false);
+      }, 500);
+    }
+  }, [loadingTweetList, loadingTweetYourRank]);
+
   const getPrice = async () => {
     const res = await fetch('https://api.binance.com/api/v3/ticker/price');
 
@@ -182,7 +194,9 @@ const Reward = () => {
               padding: 0,
             }}
           >
-            {tweetList == null || tweetList.length === 0 ? (
+            {loadingTweetList || loadingx ? (
+              <CenterLoading />
+            ) : tweetList == null || tweetList.length === 0 ? (
               <div className="flex flex-col items-center">
                 <ListEmpty className="mt-[50px]" />
                 <p className="xfans-font-sf mt-[10px] text-[#00000080]">
@@ -247,7 +261,9 @@ const Reward = () => {
               padding: 0,
             }}
           >
-            {tweetYourRank == null || tweetYourRank.length === 0 ? (
+            {loadingTweetYourRank || loadingx ? (
+              <CenterLoading />
+            ) : tweetYourRank == null || tweetYourRank.length === 0 ? (
               <div className="flex flex-col items-center">
                 <ListEmpty className="mt-[50px]" />
                 <p className="xfans-font-sf mt-[10px] text-[#00000080]">

diff --git a/src/welcome/Wallet/Profile.tsx b/src/welcome/Wallet/Profile.tsx
@@ -32,6 +32,7 @@ const ProfileModal = () => {
   const { tweetList, tweetListTotal } = useTweetStore((state) => ({ ...state }));
   const [isBuyModalOpen, { setLeft: closeBuyModal, setRight: openBuyModal }] = useToggle(false);
   const [isSellModalOpen, { setLeft: closeSellModal, setRight: openSellModal }] = useToggle(false);
+  const [loadingx, setLoadingx] = useState(true);
 
   const openTwitterProfile = (username: string | undefined) =>
     username && window.open(`https://twitter.com/${username}`, '_blank');
@@ -121,8 +122,20 @@ const ProfileModal = () => {
     }
   }, [open]);
 
+  useEffect(() => {
+    let timeout: any;
+
+    if (isGetHolderListLoading || isGetTweetListLoading) {
+      setLoadingx(true);
+      timeout = setTimeout(() => {
+        setLoadingx(false);
+      }, 500);
+    }
+  }, [isGetHolderListLoading, isGetTweetListLoading]);
+
   const [curPages, setCurPages] = useState([0, 0, 0]);
   function handlePageChange(nextPage: number) {
+    if (open) setLoadingx(true);
     const nextPages = [...curPages];
     nextPages[currentKey] = nextPage;
     setCurPages(nextPages);
@@ -225,7 +238,7 @@ const ProfileModal = () => {
                 marginTop: 2,
               }}
             >
-              {isGetHolderListLoading ? (
+              {isGetHolderListLoading || loadingx ? (
                 <CenterLoading />
               ) : rows == null || rows?.length === 0 ? (
                 <TableEmptyWidget
@@ -277,7 +290,7 @@ const ProfileModal = () => {
                 marginTop: 2,
               }}
             >
-              {isGetHolderListLoading ? (
+              {isGetHolderListLoading || loadingx ? (
                 <CenterLoading />
               ) : holding == null || holding.length === 0 ? (
                 <TableEmptyWidget
@@ -329,7 +342,7 @@ const ProfileModal = () => {
                 marginTop: 2,
               }}
             >
-              {isGetTweetListLoading ? (
+              {isGetTweetListLoading || loadingx ? (
                 <CenterLoading />
               ) : tweetList == null || tweetList.length === 0 ? (
                 <TableEmptyWidget