src/components/Loading.tsx

@@ -2,14 +2,14 @@ import React from "react";
 import { Button, Spinner } from "react-bootstrap";
 import { Grid } from "@material-ui/core";
 
-const Loading = (props: { target?: string }) => {
-  const { target } = props;
+const Loading = (props: { target?: string, gridSize?: number }) => {
+  const { gridSize, target } = props;
   const title = target ? `Fetching ${target}` : "Connecting to Websocket";
   return (
     <Grid
       style={{ textAlign: "center", backgroundColor: "#000", color: "#fff" }}
       item
-      lg={12}
+      lg={gridSize | 6}
     >
       <Button variant="warning" className="m-1 py-0 mr-2 mt-3">
         <Spinner animation="border" variant="dark" size="sm" className="mr-1" />

src/components/Validators/index.tsx

@@ -134,7 +134,7 @@ const Validators = (iProps: IProps) => {
 
   const classes = useStyles();
 
-  if (!status || !status.block) return <Loading />;
+  if (!status || !status.block) return <Loading gridSize={12}/>;
 
   const { lastReward, block, era, startTime } = status;
 
@@ -145,7 +145,7 @@ const Validators = (iProps: IProps) => {
   const unstarred = validators.filter((v) => !stars[v]);
   const waiting = stashes.filter((s) => !stars[s] && !validators.includes(s));
 
-  if (!unstarred.length) return <Loading target="validators" />;
+  if (!unstarred.length) return <Loading gridSize={12} target="validators" />;
 
   return (
     <Grid