Merge branch 'refs/heads/koni/dev/issue-161' into mythical-dev

Koniverse · Dec 17, 2024 · 1c3cbf5 · 1c3cbf5
2 parents cc093e6 + f60e64f
commit 1c3cbf5
Show file tree

Hide file tree

Showing 6 changed files with 253 additions and 56 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
@@ -12,7 +12,7 @@ import { TERM_AND_CONDITION_MODAL_ID, TermAndConditionModal } from '@subwallet/e
 import { TopThreeArea } from '@subwallet/extension-koni-ui/Popup/Home/LeaderboardTemp/TopThreeArea';
 import { ThemeProps } from '@subwallet/extension-koni-ui/types';
 import { openInNewTab } from '@subwallet/extension-koni-ui/utils';
-import { ModalContext } from '@subwallet/react-ui';
+import { ModalContext, Skeleton } from '@subwallet/react-ui';
 import React, { useCallback, useContext, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import styled from 'styled-components';
@@ -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;
@@ -123,29 +128,60 @@ const Component = ({ className }: Props): React.ReactElement => {
         title={currentLeaderboardInfo?.name || t('Leaderboard')}
       />
 
-      {leaderboardInfo?.endTimeTs && leaderboardInfo?.specialTime && <div className='time-remaining-wrapper'>
-        <TimeRemaining endTime={new Date(leaderboardInfo.endTimeTs).toString()} />
-      </div>}
+      {
+        <div className='time-remaining-wrapper'>
+          <TimeRemaining
+            endTime={leaderboardInfo?.endTimeTs ? new Date(leaderboardInfo?.endTimeTs).toString() : undefined}
+          />
+        </div>}
 
       <div className='scroll-container'>
         <TopThreeArea
           className={'top-three-area'}
           isLoading={isLoading}
           leaderboardPersonItems={leaderboardPersonItems}
         />
-
-        <CallToAction
-          buttonLabel={'Play now'}
-          className={'call-to-action'}
-          onAction={openAppStoreLink}
-          subtitle={'Download NFL Rivals App'}
-          title={'Want to get to the big league?'}
-        />
-
-        <GameAccountListArea
-          isLoading={isLoading}
-          leaderboardPersonItems={leaderboardPersonItems}
-        />
+        {isLoading
+          ? (
+            <Skeleton.Input
+              active={true}
+              className={'skeleton-banner'}
+              size={'large'}
+              style={{
+                width: '100%',
+                height: 83
+              }}
+            />
+          )
+          : (
+            <CallToAction
+              buttonLabel={'Play now'}
+              className={'call-to-action'}
+              onAction={openAppStoreLink}
+              subtitle={'Download NFL Rivals App'}
+              title={'Want to get to the big league?'}
+            />
+          )}
+
+        {isLoading
+          ? (
+            <div className='skeleton-list-wrapper'>
+              {Array.from({ length: 10 }).map((_, index) => (
+                <Skeleton.Input
+                  active={true}
+                  className='skeleton-list-item'
+                  key={index}
+                  size='small'
+                />
+              ))}
+            </div>
+          )
+          : (
+            <GameAccountListArea
+              isLoading={isLoading}
+              leaderboardPersonItems={leaderboardPersonItems}
+            />
+          )}
       </div>
 
       <TermAndConditionModal
@@ -163,6 +199,39 @@ const Leaderboard = styled(Component)<ThemeProps>(({ theme: { extendToken, token
     overflow: 'auto',
     height: '100%',
 
+    '.skeleton-list-item': {
+      display: 'block !important',
+      height: '54px !important',
+
+      '&.ant-skeleton': {
+        marginLeft: 8,
+        marginRight: 8
+      },
+
+      '.ant-skeleton-input': {
+        width: '100% !important'
+      }
+    },
+
+    '.skeleton-list-item + .skeleton-list-item': {
+      marginTop: 4
+    },
+
+    '.skeleton-banner': {
+      display: 'block !important',
+      height: '83px !important',
+
+      '&.ant-skeleton': {
+        marginLeft: 8,
+        marginRight: 8,
+        marginBottom: 12
+      },
+
+      '.ant-skeleton-input': {
+        width: '100% !important'
+      }
+    },
+
     '.main-screen-header': {
       '.__screen-title': {
         maxWidth: 250,

diff --git a/packages/extension-koni-ui/src/components/Mythical/Common/TimeRemaining.tsx b/packages/extension-koni-ui/src/components/Mythical/Common/TimeRemaining.tsx
@@ -11,7 +11,7 @@ import styled from 'styled-components';
 import { ClockIcon } from '../Icon';
 
 type Props = ThemeProps & {
-  endTime: string;
+  endTime?: string;
 };
 
 const apiSDK = BookaSdk.instance;

diff --git a/packages/extension-koni-ui/src/components/Mythical/Leaderboard/TopAccountItem.tsx b/packages/extension-koni-ui/src/components/Mythical/Leaderboard/TopAccountItem.tsx
@@ -4,6 +4,7 @@
 import { GameAccountAvatar } from '@subwallet/extension-koni-ui/components/Mythical';
 import { ThemeProps } from '@subwallet/extension-koni-ui/types';
 import { toDisplayNumber } from '@subwallet/extension-koni-ui/utils';
+import { Skeleton } from '@subwallet/react-ui';
 import CN from 'classnames';
 import React from 'react';
 import styled from 'styled-components';
@@ -28,29 +29,65 @@ const Component = ({ avatarSrc, className, isFirst, isLoading, name = '---', poi
         '-is-first': isFirst
       })}
     >
-      <GameAccountAvatar
-        avatarSrc={avatarSrc}
-        className={'__avatar-wrapper'}
-        isPlaceholder={isLoading}
-        partNode={(
-          <div className='__rank'>
-            {rank}
+      {isLoading
+        ? (
+          <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')}>
-        {name}
+        {isLoading
+          ? (
+            <Skeleton.Input
+              active={true}
+              className={'__skeleton-content'}
+            />
+          )
+          : name}
       </div>
 
       <div className='__point'>
-        {`${toDisplayNumber(point)}`}
+        {isLoading
+          ? (
+            <Skeleton.Input
+              active={true}
+              className={'__skeleton-content'}
+            />
+          )
+          : `${toDisplayNumber(point)}`}
       </div>
 
-      <div className='__token-Value-wrapper'>
-        <div className='__token-Value'>
-          {`+${toDisplayNumber(tokenValue)} Myth`}
-        </div>
+      <div className='__token-value-wrapper'>
+        {isLoading
+          ? (
+            <Skeleton.Input
+              active={true}
+              className={'__token-value-skeleton'}
+            />
+          )
+          : (
+            <div className='__token-value'>
+              {`+${toDisplayNumber(tokenValue)} Myth`}
+            </div>
+          )}
       </div>
 
     </div>
@@ -86,6 +123,21 @@ const TopAccountItem = styled(Component)<ThemeProps>(({ theme: { extendToken, to
       top: 0
     },
 
+    '.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': {
       overflow: 'hidden',
       'white-space': 'nowrap',
@@ -106,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,
@@ -125,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
@@ -137,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
+        }
       }
     },
 
@@ -167,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
+        }
       }
     }
   };