From d1a632f8a94516c7b30f3df424b24597ba1ca995 Mon Sep 17 00:00:00 2001
From: Jaco <jacogr@gmail.com>
Date: Sat, 26 Jun 2021 13:16:34 +0300
Subject: [PATCH] Add contributions loading indicator (#5693)

---
 .../page-parachains/src/Crowdloan/Fund.tsx    | 36 +++++++++++--------
 1 file changed, 21 insertions(+), 15 deletions(-)

diff --git a/packages/page-parachains/src/Crowdloan/Fund.tsx b/packages/page-parachains/src/Crowdloan/Fund.tsx
index dcf3347811..504d868850 100644
--- a/packages/page-parachains/src/Crowdloan/Fund.tsx
+++ b/packages/page-parachains/src/Crowdloan/Fund.tsx
@@ -6,7 +6,7 @@ import type { Campaign, LeasePeriod } from '../types';
 
 import React, { useEffect, useMemo, useState } from 'react';
 
-import { AddressMini, Expander, Icon, ParaLink, TxButton } from '@polkadot/react-components';
+import { AddressMini, Expander, Icon, ParaLink, Spinner, TxButton } from '@polkadot/react-components';
 import { useAccounts, useApi, useParaEndpoints } from '@polkadot/react-hooks';
 import { BlockToTime, FormatBalance } from '@polkadot/react-query';
 import { formatNumber } from '@polkadot/util';
@@ -132,20 +132,26 @@ function Fund ({ bestHash, bestNumber, className, isOdd, isOngoing, leasePeriod,
         )}
       </td>
       <td className='number together media--1100'>
-        {bestHash && (
-          <Icon
-            color={
-              lastChange.prevHash === bestHash
-                ? 'green'
-                : 'transparent'
-            }
-            icon='chevron-up'
-            isPadded
-          />
-        )}
-        {contributorsHex.length !== 0 && (
-          formatNumber(contributorsHex.length)
-        )}
+        {contribHash === '-'
+          ? <Spinner variant='mini' />
+          : (
+            <>
+              {bestHash && (
+                <Icon
+                  color={
+                    lastChange.prevHash === bestHash
+                      ? 'green'
+                      : 'transparent'
+                  }
+                  icon='chevron-up'
+                  isPadded
+                />
+              )}
+              {contributorsHex.length !== 0 && (
+                formatNumber(contributorsHex.length)
+              )}
+            </>
+          )}
       </td>
       <td className='button media--1000'>
         {canWithdraw && contributorsHex.length !== 0 && (