feat(ux):JoinPool: Inline sync for provided pool

src/canvas/JoinPool/Overview/PerformanceGraph.tsx

@@ -42,6 +42,7 @@ ChartJS.register(
 export const PerformanceGraph = ({
   bondedPool,
   performanceKey,
+  graphSyncing,
 }: OverviewSectionProps) => {
   const { t } = useTranslation();
   const { mode } = useTheme();
@@ -59,15 +60,17 @@ export const PerformanceGraph = ({
   const size = useSize(graphInnerRef?.current || undefined);
   const { width, height } = formatSize(size, 150);
 
-  // Format reward points as an array of strings.
-  const dataset = Object.values(
-    Object.fromEntries(
-      Object.entries(rawEraRewardPoints).map(([k, v]: AnyJson) => [
-        k,
-        new BigNumber(v).toString(),
-      ])
-    )
-  );
+  // Format reward points as an array of strings, or an empty array if syncing.
+  const dataset = graphSyncing
+    ? []
+    : Object.values(
+        Object.fromEntries(
+          Object.entries(rawEraRewardPoints).map(([k, v]: AnyJson) => [
+            k,
+            new BigNumber(v).toString(),
+          ])
+        )
+      );
 
   // Format labels, only displaying the first and last era.
   const labels = Object.keys(rawEraRewardPoints).map(() => '');

src/canvas/JoinPool/Overview/Stats.tsx

@@ -11,8 +11,15 @@ import type { OverviewSectionProps } from '../types';
 import { useTranslation } from 'react-i18next';
 import { usePoolPerformance } from 'contexts/Pools/PoolPerformance';
 import { MaxEraRewardPointsEras } from 'consts';
+import { StyledLoader } from 'library/PoolSync/Loader';
+import type { CSSProperties } from 'styled-components';
+import { PoolSync } from 'library/PoolSync';
 
-export const Stats = ({ bondedPool, performanceKey }: OverviewSectionProps) => {
+export const Stats = ({
+  bondedPool,
+  performanceKey,
+  graphSyncing,
+}: OverviewSectionProps) => {
   const { t } = useTranslation('library');
   const {
     networkData: {
@@ -56,20 +63,36 @@ export const Stats = ({ bondedPool, performanceKey }: OverviewSectionProps) => {
     }
   }, [bondedPool.id, bondedPool.points, isReady]);
 
+  const vars = {
+    '--loader-color': 'var(--text-color-secondary)',
+  } as CSSProperties;
+
   return (
     <HeadingWrapper>
       <h4>
-        {rawEraRewardPoints.length === MaxEraRewardPointsEras && (
-          <span className="active">{t('activelyNominating')}</span>
-        )}
+        {graphSyncing ? (
+          <span>
+            {t('syncing')}
+            <StyledLoader style={{ ...vars, marginRight: '1.25rem' }} />
+            <PoolSync performanceKey={performanceKey} />
+          </span>
+        ) : (
+          <>
+            {rawEraRewardPoints.length === MaxEraRewardPointsEras && (
+              <span className="active">{t('activelyNominating')}</span>
+            )}
 
-        <span className="balance">
-          <Token className="icon" />
-          {!poolBalance
-            ? `...`
-            : planckToUnit(poolBalance, units).decimalPlaces(3).toFormat()}{' '}
-          {unit} {t('bonded')}
-        </span>
+            <span className="balance">
+              <Token className="icon" />
+              {!poolBalance
+                ? `...`
+                : planckToUnit(poolBalance, units)
+                    .decimalPlaces(3)
+                    .toFormat()}{' '}
+              {unit} {t('bonded')}
+            </span>
+          </>
+        )}
       </h4>
     </HeadingWrapper>
   );

src/canvas/JoinPool/index.tsx

@@ -104,7 +104,8 @@ export const JoinPool = () => {
 
   return (
     <CanvasFullScreenWrapper>
-      {poolJoinPerformanceTask.status !== 'synced' || !bondedPool ? (
+      {(!providedPoolId && poolJoinPerformanceTask.status !== 'synced') ||
+      !bondedPool ? (
         <Preloader performanceKey={performanceKey} />
       ) : (
         <>
@@ -125,6 +126,10 @@ export const JoinPool = () => {
                 <Overview
                   bondedPool={bondedPool}
                   performanceKey={performanceKey}
+                  graphSyncing={
+                    providedPoolId &&
+                    poolJoinPerformanceTask.status !== 'synced'
+                  }
                 />
               )}
               {activeTab === 1 && (

src/canvas/JoinPool/types.ts

@@ -30,4 +30,5 @@ export interface AddressSectionProps {
 export interface OverviewSectionProps {
   bondedPool: BondedPool;
   performanceKey: PoolRewardPointsKey;
+  graphSyncing: boolean;
 }

src/library/PoolSync/Loader.ts

@@ -7,7 +7,8 @@ export const StyledLoader = styled.div`
   height: 0.8rem;
   margin-left: 1.6rem;
   aspect-ratio: 5;
-  --_g: no-repeat radial-gradient(farthest-side, white 94%, #0000);
+  --_g: no-repeat
+    radial-gradient(farthest-side, var(--loader-color, white) 94%, #0000);
   background: var(--_g), var(--_g), var(--_g), var(--_g);
   background-size: 20% 100%;
   animation: