From e5027fffc3151dbdf0c4b7cce09f37aaeb184971 Mon Sep 17 00:00:00 2001
From: Ross Bulat <ross@parity.io>
Date: Fri, 5 Apr 2024 20:55:12 +0700
Subject: [PATCH] feat: Join pool progress bar on performance fetch. (#2064)

---
 src/canvas/JoinPool/Preloader.tsx | 33 ++++---------------------------
 src/canvas/JoinPool/Wrappers.ts   | 33 +++++++++++++++++++++++++++++--
 src/canvas/Wrappers.ts            |  4 ++++
 src/library/PoolSync/Bar.tsx      | 31 +++++++++++++++++++++++++++++
 4 files changed, 70 insertions(+), 31 deletions(-)
 create mode 100644 src/library/PoolSync/Bar.tsx

diff --git a/src/canvas/JoinPool/Preloader.tsx b/src/canvas/JoinPool/Preloader.tsx
index 27824af378..c643d0a6a2 100644
--- a/src/canvas/JoinPool/Preloader.tsx
+++ b/src/canvas/JoinPool/Preloader.tsx
@@ -6,7 +6,6 @@ import { ButtonPrimary } from 'kits/Buttons/ButtonPrimary';
 import { useOverlay } from 'kits/Overlay/Provider';
 import { useTranslation } from 'react-i18next';
 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';
@@ -14,7 +13,7 @@ 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';
+import { PoolSyncBar } from 'library/PoolSync/Bar';
 
 export const Preloader = () => {
   const { t } = useTranslation('pages');
@@ -47,7 +46,7 @@ export const Preloader = () => {
           style={{ marginLeft: '1.1rem' }}
         />
       </div>
-      <CanvasTitleWrapper>
+      <CanvasTitleWrapper className="padding">
         <div className="inner">
           <div className="empty"></div>
           <div className="standalone">
@@ -66,31 +65,6 @@ export const Preloader = () => {
             </div>
           </div>
         </div>
-        <PageTitleTabs
-          sticky={false}
-          tabs={[
-            {
-              title: t('pools.overview', { ns: 'pages' }),
-              active: true,
-              onClick: () => {
-                /* Do nothing */
-              },
-              disabled: true,
-              asPreloader: true,
-            },
-            {
-              title: t('nominate.nominations', { ns: 'pages' }),
-              active: true,
-              onClick: () => {
-                /* Do nothing */
-              },
-              disabled: true,
-              asPreloader: true,
-            },
-          ]}
-          tabClassName="canvas"
-          inline={true}
-        />
       </CanvasTitleWrapper>
 
       <JoinPoolInterfaceWrapper>
@@ -98,8 +72,9 @@ export const Preloader = () => {
           <h2 className="tip">
             {t('analyzingPoolPerformance', { ns: 'library' })}...
           </h2>
+
           <h2 className="tip">
-            <PoolSync />
+            <PoolSyncBar />
           </h2>
         </div>
       </JoinPoolInterfaceWrapper>
diff --git a/src/canvas/JoinPool/Wrappers.ts b/src/canvas/JoinPool/Wrappers.ts
index b9cef2e3db..13ba45b924 100644
--- a/src/canvas/JoinPool/Wrappers.ts
+++ b/src/canvas/JoinPool/Wrappers.ts
@@ -53,11 +53,40 @@ export const JoinPoolInterfaceWrapper = styled.div`
 
     > .tip {
       color: var(--accent-color-primary);
-      margin-top: 1rem;
+      margin-bottom: 1rem;
       font-family: Inter, sans-serif;
       display: flex;
       align-items: center;
-      justify-content: center;
+      justify-content: flex-start;
+
+      > .loader {
+        border: 1.5px solid var(--accent-color-pending);
+        color: var(--accent-color-primary);
+        width: 100%;
+        height: 1.5rem;
+        border-radius: 1rem;
+        position: relative;
+
+        > div {
+          position: absolute;
+          top: 0.25rem;
+          left: 0.3rem;
+          width: calc(100% - 0.6rem);
+          height: calc(100% - 0.5rem);
+          border-radius: 1rem;
+
+          > .progress {
+            background-color: var(--accent-color-primary);
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 0;
+            height: 100%;
+            border-radius: 2rem;
+            transition: width 1s cubic-bezier(0.1, 1, 0.1, 1);
+          }
+        }
+      }
     }
   }
 `;
diff --git a/src/canvas/Wrappers.ts b/src/canvas/Wrappers.ts
index 5a03b1a6ea..fcde790c22 100644
--- a/src/canvas/Wrappers.ts
+++ b/src/canvas/Wrappers.ts
@@ -29,6 +29,10 @@ export const CanvasTitleWrapper = styled.div`
   margin: 2rem 0 1.55rem 0;
   padding-bottom: 0.1rem;
 
+  &.padding {
+    padding-bottom: 0.75rem;
+  }
+
   > .inner {
     display: flex;
     align-items: center;
diff --git a/src/library/PoolSync/Bar.tsx b/src/library/PoolSync/Bar.tsx
new file mode 100644
index 0000000000..fd11802626
--- /dev/null
+++ b/src/library/PoolSync/Bar.tsx
@@ -0,0 +1,31 @@
+// Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors
+// SPDX-License-Identifier: GPL-3.0-only
+
+import BigNumber from 'bignumber.js';
+import { usePoolPerformance } from 'contexts/Pools/PoolPerformance';
+
+export const PoolSyncBar = () => {
+  const { getPoolPerformanceTask } = usePoolPerformance();
+
+  // Get the pool performance task to determine if performance data is ready.
+  const poolJoinPerformanceTask = getPoolPerformanceTask('pool_join');
+
+  // Calculate syncing status.
+  const { startEra, currentEra, endEra } = poolJoinPerformanceTask;
+  const totalEras = startEra.minus(endEra);
+  const erasPassed = startEra.minus(currentEra);
+  const percentPassed = erasPassed.isEqualTo(0)
+    ? new BigNumber(0)
+    : erasPassed.dividedBy(totalEras).multipliedBy(100);
+
+  return (
+    <div className="loader">
+      <div>
+        <span
+          className="progress"
+          style={{ width: `${percentPassed}%` }}
+        ></span>
+      </div>
+    </div>
+  );
+};