feat: add spinner

striker-ui/components/CPU.tsx

@@ -5,6 +5,7 @@ import { AllocationBar } from './Bars';
 import { HeaderText, BodyText } from './Text';
 import PeriodicFetch from '../lib/fetchers/periodicFetch';
 import { AnvilContext } from './AnvilContext';
+import Spinner from './Spinner';
 
 const CPU = (): JSX.Element => {
   const { uuid } = useContext(AnvilContext);
@@ -19,6 +20,9 @@ const CPU = (): JSX.Element => {
   return (
     <Panel>
       <HeaderText text="CPU" />
+      {!isLoading ? (
+        <>
+          {' '}
           <Box display="flex" width="100%">
             <Box flexGrow={1}>
               <BodyText text={`Allocated: ${cpuData.allocated}`} />
@@ -39,6 +43,10 @@ const CPU = (): JSX.Element => {
               text={`Total Cores: ${cpuData.cores}c | ${cpuData.threads}t`}
             />
           </Box>
+        </>
+      ) : (
+        <Spinner />
+      )}
     </Panel>
   );
 };

striker-ui/components/Hosts/index.tsx

@@ -4,26 +4,33 @@ import { HeaderText } from '../Text';
 import AnvilHost from './AnvilHost';
 import PeriodicFetch from '../../lib/fetchers/periodicFetch';
 import { AnvilContext } from '../AnvilContext';
+import Spinner from '../Spinner';
 
 const Hosts = ({ anvil }: { anvil: AnvilListItem[] }): JSX.Element => {
   const { uuid } = useContext(AnvilContext);
 
-  const { data } = PeriodicFetch<AnvilStatus>(
+  const { data, isLoading } = PeriodicFetch<AnvilStatus>(
     `${process.env.NEXT_PUBLIC_API_URL}/get_status?anvil_uuid=${uuid}`,
   );
 
   return (
     <Panel>
       <HeaderText text="Nodes" />
+      {!isLoading ? (
+        <>
           {anvil.findIndex((a) => a.anvil_uuid === uuid) !== -1 && data && (
             <AnvilHost
-          hosts={anvil[anvil.findIndex((a) => a.anvil_uuid === uuid)].hosts.map(
+              hosts={anvil[
-            (host, index) => {
+                anvil.findIndex((a) => a.anvil_uuid === uuid)
+              ].hosts.map((host, index) => {
                 return data.hosts[index];
-            },
+              })}
-          )}
             />
           )}
+        </>
+      ) : (
+        <Spinner />
+      )}
     </Panel>
   );
 };

striker-ui/components/Memory.tsx

@@ -6,6 +6,7 @@ import { AllocationBar } from './Bars';
 import { HeaderText, BodyText } from './Text';
 import PeriodicFetch from '../lib/fetchers/periodicFetch';
 import { AnvilContext } from './AnvilContext';
+import Spinner from './Spinner';
 
 const Memory = (): JSX.Element => {
   const { uuid } = useContext(AnvilContext);
@@ -19,6 +20,9 @@ const Memory = (): JSX.Element => {
   return (
     <Panel>
       <HeaderText text="Memory" />
+      {!isLoading ? (
+        <>
+          {' '}
           <Box display="flex" width="100%">
             <Box flexGrow={1}>
               <BodyText
@@ -54,6 +58,10 @@ const Memory = (): JSX.Element => {
               })}`}
             />
           </Box>
+        </>
+      ) : (
+        <Spinner />
+      )}
     </Panel>
   );
 };

striker-ui/components/Network/Network.tsx

@@ -8,6 +8,7 @@ import { DIVIDER } from '../../lib/consts/DEFAULT_THEME';
 import processNetworkData from './processNetwork';
 import { AnvilContext } from '../AnvilContext';
 import Decorator, { Colours } from '../Decorator';
+import Spinner from '../Spinner';
 
 const useStyles = makeStyles((theme) => ({
   container: {
@@ -48,7 +49,7 @@ const Network = (): JSX.Element => {
   const { uuid } = useContext(AnvilContext);
   const classes = useStyles();
 
-  const { data } = PeriodicFetch<AnvilNetwork>(
+  const { data, isLoading } = PeriodicFetch<AnvilNetwork>(
     `${process.env.NEXT_PUBLIC_API_URL}/get_networks?anvil_uuid=${uuid}`,
   );
 
@@ -56,6 +57,7 @@ const Network = (): JSX.Element => {
   return (
     <Panel>
       <HeaderText text="Network" />
+      {!isLoading ? (
         <Box className={classes.container}>
           {data &&
             processed.bonds.map((bond: ProcessedBond) => {
@@ -90,6 +92,9 @@ const Network = (): JSX.Element => {
               );
             })}
         </Box>
+      ) : (
+        <Spinner />
+      )}
     </Panel>
   );
 };

striker-ui/components/Servers.tsx

@@ -8,6 +8,7 @@ import { HOVER, DIVIDER } from '../lib/consts/DEFAULT_THEME';
 import { AnvilContext } from './AnvilContext';
 import serverState from '../lib/consts/SERVERS';
 import Decorator, { Colours } from './Decorator';
+import Spinner from './Spinner';
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -49,14 +50,16 @@ const Servers = ({ anvil }: { anvil: AnvilListItem[] }): JSX.Element => {
   const { uuid } = useContext(AnvilContext);
   const classes = useStyles();
 
-  const { data } = PeriodicFetch<AnvilServers>(
+  const { data, isLoading } = PeriodicFetch<AnvilServers>(
     `${process.env.NEXT_PUBLIC_API_URL}/get_servers?anvil_uuid=${uuid}`,
   );
+
   return (
     <Panel>
       <div className={classes.headerPadding}>
         <HeaderText text="Servers" />
       </div>
+      {!isLoading ? (
         <Box className={classes.root}>
           <List component="nav">
             {data &&
@@ -107,6 +110,9 @@ const Servers = ({ anvil }: { anvil: AnvilListItem[] }): JSX.Element => {
               })}
           </List>
         </Box>
+      ) : (
+        <Spinner />
+      )}
     </Panel>
   );
 };

striker-ui/components/SharedStorage/SharedStorage.tsx

@@ -7,6 +7,7 @@ import { Panel, InnerPanel, PanelHeader } from '../Panels';
 import SharedStorageHost from './SharedStorageHost';
 import PeriodicFetch from '../../lib/fetchers/periodicFetch';
 import { AnvilContext } from '../AnvilContext';
+import Spinner from '../Spinner';
 
 const useStyles = makeStyles((theme) => ({
   header: {
@@ -26,12 +27,13 @@ const useStyles = makeStyles((theme) => ({
 const SharedStorage = ({ anvil }: { anvil: AnvilListItem[] }): JSX.Element => {
   const classes = useStyles();
   const { uuid } = useContext(AnvilContext);
-  const { data } = PeriodicFetch<AnvilSharedStorage>(
+  const { data, isLoading } = PeriodicFetch<AnvilSharedStorage>(
     `${process.env.NEXT_PUBLIC_API_URL}/get_shared_storage?anvil_uuid=${uuid}`,
   );
   return (
     <Panel>
       <HeaderText text="Shared Storage" />
+      {!isLoading ? (
         <Box className={classes.root}>
           {data?.file_systems &&
             data.file_systems.map(
@@ -65,6 +67,9 @@ const SharedStorage = ({ anvil }: { anvil: AnvilListItem[] }): JSX.Element => {
               ),
             )}
         </Box>
+      ) : (
+        <Spinner />
+      )}
     </Panel>
   );
 };

striker-ui/components/Spinner.tsx

@@ -0,0 +1,31 @@
+import { makeStyles } from '@material-ui/core/styles';
+import CircularProgress from '@material-ui/core/CircularProgress';
+
+const useStyles = makeStyles(() => ({
+  root: {
+    display: 'flex',
+    /* '& > * + *': {
+      marginLeft: theme.spacing(2),
+    }, */
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginTop: '3em',
+  },
+  spinner: {
+    color: '#FFF',
+    variant: 'indeterminate',
+    size: '50em',
+  },
+}));
+
+const Spinner = (): JSX.Element => {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.root}>
+      <CircularProgress className={classes.spinner} />
+    </div>
+  );
+};
+
+export default Spinner;