diff --git a/src/v2/components/Validators/Table/index.jsx b/src/v2/components/Validators/Table/index.jsx index 07d2b1e1..8a10c221 100644 --- a/src/v2/components/Validators/Table/index.jsx +++ b/src/v2/components/Validators/Table/index.jsx @@ -21,6 +21,8 @@ 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}) => { @@ -28,6 +30,16 @@ const ValidatorsTable = ({separate}: {separate: boolean}) => { const theme = useTheme(); const showTable = useMediaQuery(theme.breakpoints.up('md')); const {activeValidators, inactiveValidators} = NodesStore; + const {isLoading} = Socket; + + if (isLoading) { + return ( +
+ +
+ ); + } + 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 index 1ec3c648..82bf0feb 100644 --- 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',