feat(ux): Improve Join Pool preloader

src/canvas/JoinPool/Preloader.tsx

@@ -1,35 +1,44 @@
 // Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: GPL-3.0-only
 
-import { faArrowsRotate, faTimes } from '@fortawesome/free-solid-svg-icons';
+import { faTimes } from '@fortawesome/free-solid-svg-icons';
 import { ButtonPrimary } from 'kits/Buttons/ButtonPrimary';
-import { ButtonPrimaryInvert } from 'kits/Buttons/ButtonPrimaryInvert';
 import { useOverlay } from 'kits/Overlay/Provider';
 import { useTranslation } from 'react-i18next';
-import {
-  JoinFormWrapper,
-  JoinPoolInterfaceWrapper,
-  PreloaderWrapper,
-} from './Wrappers';
-import { PoolSync } from 'library/PoolSync';
-import { CallToActionLoader } from 'library/Loader/CallToAction';
-import { LoaderWrapper } from 'library/Loader/Wrappers';
+import { JoinPoolInterfaceWrapper } from './Wrappers';
 import { PageTitleTabs } from 'kits/Structure/PageTitleTabs';
 import { CanvasTitleWrapper } from 'canvas/Wrappers';
+import { useBondedPools } from 'contexts/Pools/BondedPools';
+import BigNumber from 'bignumber.js';
+import type { BondedPool } from 'contexts/Pools/BondedPools/types';
+import { capitalizeFirstLetter, planckToUnit, rmCommas } from '@w3ux/utils';
+import { useNetwork } from 'contexts/Network';
+import { useApi } from 'contexts/Api';
+import { PoolSync } from 'library/PoolSync';
 
 export const Preloader = () => {
-  const { t } = useTranslation();
+  const { t } = useTranslation('pages');
+  const {
+    network,
+    networkData: { units, unit },
+  } = useNetwork();
+  const { bondedPools } = useBondedPools();
+  const {
+    poolsConfig: { counterForPoolMembers },
+  } = useApi();
   const { closeCanvas } = useOverlay().canvas;
 
+  let totalPoolPoints = new BigNumber(0);
+  bondedPools.forEach((b: BondedPool) => {
+    totalPoolPoints = totalPoolPoints.plus(rmCommas(b.points));
+  });
+  const totalPoolPointsUnit = planckToUnit(totalPoolPoints, units)
+    .decimalPlaces(0)
+    .toFormat();
+
   return (
     <>
       <div className="head">
-        <ButtonPrimaryInvert
-          text={t('chooseAnotherPool', { ns: 'library' })}
-          iconLeft={faArrowsRotate}
-          disabled
-          lg
-        />
         <ButtonPrimary
           text={t('pools.back', { ns: 'pages' })}
           lg
@@ -43,12 +52,16 @@ export const Preloader = () => {
           <div className="empty"></div>
           <div className="standalone">
             <div className="title">
-              <h1>{t('syncingPoolData', { ns: 'library' })}...</h1>
+              <h1>{t('pools.joinPool')}</h1>
             </div>
             <div className="labels">
               <h3>
-                {t('analyzingPoolPerformance', { ns: 'library' })}
-                <PoolSync label={t('complete', { ns: 'library' })} />
+                {t('pools.joinPoolHeading', {
+                  totalMembers: new BigNumber(counterForPoolMembers).toFormat(),
+                  totalPoolPoints: totalPoolPointsUnit,
+                  unit,
+                  network: capitalizeFirstLetter(network),
+                })}
               </h3>
             </div>
           </div>
@@ -81,19 +94,13 @@ export const Preloader = () => {
       </CanvasTitleWrapper>
 
       <JoinPoolInterfaceWrapper>
-        <div className="content">
-          <div className="main">
-            <PreloaderWrapper>
-              <CallToActionLoader />
-            </PreloaderWrapper>
-          </div>
-          <div className="side">
-            <div>
-              <JoinFormWrapper className="preload">
-                <LoaderWrapper style={{ width: '100%', height: '30rem' }} />
-              </JoinFormWrapper>
-            </div>
-          </div>
+        <div className="content" style={{ flexDirection: 'column' }}>
+          <h2 className="tip">
+            {t('analyzingPoolPerformance', { ns: 'library' })}...
+          </h2>
+          <h2 className="tip">
+            <PoolSync />
+          </h2>
         </div>
       </JoinPoolInterfaceWrapper>
     </>

src/canvas/JoinPool/Wrappers.ts

@@ -50,13 +50,22 @@ export const JoinPoolInterfaceWrapper = styled.div`
         }
       }
     }
+
+    > .tip {
+      color: var(--accent-color-primary);
+      margin-top: 1rem;
+      font-family: Inter, sans-serif;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
   }
 `;
 
 export const PreloaderWrapper = styled.div`
   background-color: var(--background-floating-card);
   width: 100%;
-  height: 3.75rem;
+  height: 2rem;
   border-radius: 2rem;
   opacity: 0.4;
 `;

src/library/Loader/Wrappers.ts

@@ -17,15 +17,15 @@ export const LoaderWrapper = styled.div`
   animation-duration: 1.5s;
   animation-fill-mode: forwards;
   animation-iteration-count: infinite;
-  animation-name: shimmer;
+  animation-name: shimmer-loader;
   animation-timing-function: linear;
 
   opacity: 0.1;
   border-radius: 0.75rem;
   display: inline-block;
   position: relative;
 
-  @keyframes shimmer {
+  @keyframes shimmer-loader {
     0% {
       background-position: 0px 0;
     }

src/locale/cn/pages.json

@@ -154,6 +154,7 @@
       "inPool": "提名池中",
       "inactivePoolNotNominating": "非活跃：提名池未提名任何验证人",
       "joinPool": "加入提名池",
+      "joinPoolHeading": " {{totalMembers}} 个提名池成员在{{network}}上抵押共{{totalPoolPoints}} 个{{unit}} ",
       "leave": "离开",
       "leavingPool": "离开提名池中",
       "leftThePool": "所有成员已离开",

src/locale/en/pages.json

@@ -156,6 +156,7 @@
       "inPool": "In Pool",
       "inactivePoolNotNominating": "Inactive: Pool Not Nominating",
       "joinPool": "Join Pool",
+      "joinPoolHeading": "Join {{totalMembers}} pool members staking a total of {{totalPoolPoints}} {{unit}} on {{network}}.",
       "leave": "Leave",
       "leavingPool": "Leaving Pool",
       "leftThePool": "All members have now left the pool",