[Issue-161] Upload loading for leaderboard screen

Koniverse · Dec 17, 2024 · f60e64f · f60e64f
1 parent 91f946a
commit f60e64f
Show file tree

Hide file tree

Showing 4 changed files with 185 additions and 102 deletions.
diff --git a/packages/extension-koni-ui/src/Popup/Home/LeaderboardTemp/index.tsx b/packages/extension-koni-ui/src/Popup/Home/LeaderboardTemp/index.tsx
@@ -66,20 +66,25 @@ const Component = ({ className }: Props): React.ReactElement => {
   useEffect(() => {
     let isSync = true;
 
-    setIsLoading(true);
-
-    currentLeaderboardInfo && apiSDK.fetchLeaderboard(currentLeaderboardInfo.id, {})
-      .then((data) => {
-        if (!isSync) {
-          return;
-        }
-
-        setLeaderboardPersonItems(data.results);
-        setLeaderboardInfo(data.filter);
-
-        setIsLoading(false);
-      })
-      .catch(() => console.log('error'));
+    if (currentLeaderboardInfo) {
+      setIsLoading(true);
+
+      apiSDK.fetchLeaderboard(currentLeaderboardInfo.id, {})
+        .then((data) => {
+          if (!isSync) {
+            return;
+          }
+
+          setLeaderboardPersonItems(data.results);
+          setLeaderboardInfo(data.filter);
+        })
+        .catch((e) => console.log('apiSDK.fetchLeaderboard error', e))
+        .finally(() => {
+          if (isSync) {
+            setIsLoading(false);
+          }
+        });
+    }
 
     return () => {
       isSync = false;
@@ -107,7 +112,7 @@ const Component = ({ className }: Props): React.ReactElement => {
   }, []);
 
   return (
-    <div className={className}>(
+    <div className={className}>
       <MainScreenHeader
         className={'main-screen-header'}
         rightPartNode={
@@ -122,11 +127,12 @@ const Component = ({ className }: Props): React.ReactElement => {
         }
         title={currentLeaderboardInfo?.name || t('Leaderboard')}
       />
-        )
 
       {
         <div className='time-remaining-wrapper'>
-          <TimeRemaining endTime={leaderboardInfo?.endTimeTs ? new Date(leaderboardInfo?.endTimeTs).toString() : undefined} />
+          <TimeRemaining
+            endTime={leaderboardInfo?.endTimeTs ? new Date(leaderboardInfo?.endTimeTs).toString() : undefined}
+          />
         </div>}
 
       <div className='scroll-container'>
@@ -160,17 +166,12 @@ const Component = ({ className }: Props): React.ReactElement => {
         {isLoading
           ? (
             <div className='skeleton-list-wrapper'>
-              {Array.from({ length: 3 }).map((_, index) => (
+              {Array.from({ length: 10 }).map((_, index) => (
                 <Skeleton.Input
                   active={true}
-                  className='skeleton-list'
+                  className='skeleton-list-item'
                   key={index}
                   size='small'
-                  style={{
-                    width: '100%',
-                    height: 54,
-                    marginBottom: index < 2 ? 4 : 0
-                  }}
                 />
               ))}
             </div>
@@ -181,7 +182,6 @@ const Component = ({ className }: Props): React.ReactElement => {
               leaderboardPersonItems={leaderboardPersonItems}
             />
           )}
-
       </div>
 
       <TermAndConditionModal
@@ -199,24 +199,37 @@ const Leaderboard = styled(Component)<ThemeProps>(({ theme: { extendToken, token
     overflow: 'auto',
     height: '100%',
 
-    '.skeleton-list': {
-      display: 'flex',
-      flexDirection: 'column',
-      width: '100%',
-      height: 54
+    '.skeleton-list-item': {
+      display: 'block !important',
+      height: '54px !important',
+
+      '&.ant-skeleton': {
+        marginLeft: 8,
+        marginRight: 8
+      },
+
+      '.ant-skeleton-input': {
+        width: '100% !important'
+      }
     },
 
-    '.skeleton-header': {
-      paddingBottom: 20,
-      width: '100%',
-      display: 'flex',
-      flexDirection: 'column'
+    '.skeleton-list-item + .skeleton-list-item': {
+      marginTop: 4
     },
 
     '.skeleton-banner': {
-      width: '100%',
-      paddingTop: 12,
-      paddingBottom: 12
+      display: 'block !important',
+      height: '83px !important',
+
+      '&.ant-skeleton': {
+        marginLeft: 8,
+        marginRight: 8,
+        marginBottom: 12
+      },
+
+      '.ant-skeleton-input': {
+        width: '100% !important'
+      }
     },
 
     '.main-screen-header': {

diff --git a/packages/extension-koni-ui/src/components/Mythical/Leaderboard/TopAccountItem.tsx b/packages/extension-koni-ui/src/components/Mythical/Leaderboard/TopAccountItem.tsx
@@ -30,50 +30,61 @@ const Component = ({ avatarSrc, className, isFirst, isLoading, name = '---', poi
       })}
     >
       {isLoading
-        ? <Skeleton.Avatar
-          active={true}
-          shape={'circle'}
-          size={58}
-        />
-        : <GameAccountAvatar
-          avatarSrc={avatarSrc}
-          className={'__avatar-wrapper'}
-          isPlaceholder={isLoading}
-          partNode={(
-            <div className='__rank'>
-              {rank}
-            </div>
-          )}
-        /> }
+        ? (
+          <div className={'__avatar-wrapper'}>
+            <Skeleton.Avatar
+              active={true}
+              className={'__avatar-image-skeleton'}
+              shape={'circle'}
+            />
+          </div>
+        )
+        : (
+          <GameAccountAvatar
+            avatarSrc={avatarSrc}
+            className={'__avatar-wrapper'}
+            isPlaceholder={isLoading}
+            partNode={(
+              <div className='__rank'>
+                {rank}
+              </div>
+            )}
+          />
+        )
+      }
 
       <div className={CN('__account-name')}>
         {isLoading
-          ? <Skeleton.Input
-            size={'small'}
-            style={{ height: 16 }}
-          />
+          ? (
+            <Skeleton.Input
+              active={true}
+              className={'__skeleton-content'}
+            />
+          )
           : name}
       </div>
 
       <div className='__point'>
         {isLoading
-          ? <Skeleton.Input
-            active={true}
-            size='small'
-            style={{ height: 18 }}
-          />
+          ? (
+            <Skeleton.Input
+              active={true}
+              className={'__skeleton-content'}
+            />
+          )
           : `${toDisplayNumber(point)}`}
       </div>
 
-      <div className='__token-Value-wrapper'>
+      <div className='__token-value-wrapper'>
         {isLoading
-          ? (<Skeleton.Input
-            active={true}
-            size='small'
-            style={{ height: 24 }}
-          />)
+          ? (
+            <Skeleton.Input
+              active={true}
+              className={'__token-value-skeleton'}
+            />
+          )
           : (
-            <div className='__token-Value'>
+            <div className='__token-value'>
               {`+${toDisplayNumber(tokenValue)} Myth`}
             </div>
           )}
@@ -85,9 +96,6 @@ const Component = ({ avatarSrc, className, isFirst, isLoading, name = '---', poi
 
 const TopAccountItem = styled(Component)<ThemeProps>(({ theme: { extendToken, token } }: ThemeProps) => {
   return {
-    display: 'flex',
-    alignItems: 'center',
-    flexDirection: 'column',
     '.__avatar-wrapper': {
       marginLeft: 'auto',
       marginRight: 'auto',
@@ -114,8 +122,20 @@ const TopAccountItem = styled(Component)<ThemeProps>(({ theme: { extendToken, to
       right: 0,
       top: 0
     },
-    '.skeleton': {
-      backgroundColor: 'red'
+
+    '.ant-skeleton.ant-skeleton.ant-skeleton .ant-skeleton-input': {
+      width: '100%',
+      minWidth: 0
+    },
+
+    '.__skeleton-content.ant-skeleton.ant-skeleton': {
+      width: '100%',
+
+      '.ant-skeleton-input': {
+        height: '100%',
+        lineHeight: 'inherit',
+        borderRadius: 32
+      }
     },
 
     '.__account-name': {
@@ -138,12 +158,12 @@ const TopAccountItem = styled(Component)<ThemeProps>(({ theme: { extendToken, to
       marginBottom: 6
     },
 
-    '.__token-Value-wrapper': {
+    '.__token-value-wrapper': {
       display: 'flex',
       justifyContent: 'center'
     },
 
-    '.__token-Value': {
+    '.__token-value': {
       color: token.colorWhite,
       textAlign: 'center',
       fontFamily: extendToken.fontBarlowCondensed,
@@ -157,6 +177,13 @@ const TopAccountItem = styled(Component)<ThemeProps>(({ theme: { extendToken, to
       padding: '4px 12px'
     },
 
+    '.__token-value-skeleton.__token-value-skeleton.__token-value-skeleton.__token-value-skeleton': {
+      height: 16,
+      width: 70,
+      borderRadius: 100,
+      lineHeight: 'inherit'
+    },
+
     '&:not(.-is-first)': {
       '.__avatar-wrapper': {
         paddingTop: 3.5
@@ -169,21 +196,29 @@ const TopAccountItem = styled(Component)<ThemeProps>(({ theme: { extendToken, to
         lineHeight: '16px'
       },
 
-      '.__avatar-image': {
+      '.__avatar-image, .__avatar-image-skeleton .ant-skeleton-avatar': {
         width: 57,
         height: 57
       },
 
       '.__account-name': {
         fontSize: '14px',
         lineHeight: '16px',
-        letterSpacing: '0.28px'
+        letterSpacing: '0.28px',
+
+        '.__skeleton-content': {
+          height: 16
+        }
       },
 
       '.__point': {
         fontSize: '16px',
         lineHeight: '18px',
-        letterSpacing: '-0.16px'
+        letterSpacing: '-0.16px',
+
+        '.__skeleton-content': {
+          height: 18
+        }
       }
     },
 
@@ -199,21 +234,29 @@ const TopAccountItem = styled(Component)<ThemeProps>(({ theme: { extendToken, to
         lineHeight: '20px'
       },
 
-      '.__avatar-image': {
+      '.__avatar-image, .__avatar-image-skeleton .ant-skeleton-avatar': {
         width: 74,
         height: 74
       },
 
       '.__account-name': {
         fontSize: '16px',
         lineHeight: '20px',
-        letterSpacing: '0.32px'
+        letterSpacing: '0.32px',
+
+        '.__skeleton-content': {
+          height: 20
+        }
       },
 
       '.__point': {
         fontSize: '20px',
         lineHeight: '22px',
-        letterSpacing: '-0.6px'
+        letterSpacing: '-0.6px',
+
+        '.__skeleton-content': {
+          height: 22
+        }
       }
     }
   };