fix: loading animation on validators table

solana-labs · Oct 8, 2019 · 6521a46 · 6521a46
1 parent 8e6e711
commit 6521a46
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 0 deletions.
diff --git a/src/v2/components/Validators/Table/index.jsx b/src/v2/components/Validators/Table/index.jsx
@@ -21,13 +21,25 @@ import getUptime from 'v2/utils/getUptime';
 import Avatar from 'v2/components/UI/Avatar';
 
 import {LAMPORT_SOL_RATIO} from '../../../constants';
+import Socket from '../../../stores/socket';
+import Loader from '../../UI/Loader';
 import useStyles from './styles';
 
 const ValidatorsTable = ({separate}: {separate: boolean}) => {
   const classes = useStyles();
   const theme = useTheme();
   const showTable = useMediaQuery(theme.breakpoints.up('md'));
   const {activeValidators, inactiveValidators} = NodesStore;
+  const {isLoading} = Socket;
+
+  if (isLoading) {
+    return (
+      <div className={classes.loader}>
+        <Loader width="100%" height={100} />
+      </div>
+    );
+  }
+
   const renderRow = row => {
     const uptime = row.uptime && getUptime(row);
     const {identity = {}, nodePubkey, activatedStake, commission} = row;

diff --git a/src/v2/components/Validators/Table/styles.js b/src/v2/components/Validators/Table/styles.js
@@ -12,6 +12,9 @@ export default makeStyles(theme => ({
       marginBottom: 50,
     },
   },
+  loader: {
+    marginTop: 14,
+  },
   separateRoot: {
     padding: 0,
     background: 'transparent',