fix(striker-ui): add loading indicator to anvil Dashboard

2 years ago · 6970b4f882
parent 87fd3bdc6b
commit 6970b4f882
1 changed files with 74 additions and 44 deletions
--- a/striker-ui/pages/anvil/index.tsx
+++ b/striker-ui/pages/anvil/index.tsx
@ -1,20 +1,22 @@
+import { Box, styled } from '@mui/material';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
-import { useContext, useEffect } from 'react';
-import { Box } from '@mui/material';
-import { styled } from '@mui/material/styles';
+import { useContext, useEffect, useMemo } from 'react';

+import { LARGE_MOBILE_BREAKPOINT } from '../../lib/consts/DEFAULT_THEME';
+
+import AnvilProvider, { AnvilContext } from '../../components/AnvilContext';
 import Anvils from '../../components/Anvils';
-import Hosts from '../../components/Hosts';
 import CPU from '../../components/CPU';
-import SharedStorage from '../../components/SharedStorage';
+import Header from '../../components/Header';
+import Hosts from '../../components/Hosts';
 import Memory from '../../components/Memory';
 import Network from '../../components/Network';
+import { Panel } from '../../components/Panels';
 import periodicFetch from '../../lib/fetchers/periodicFetch';
 import Servers from '../../components/Servers';
-import Header from '../../components/Header';
-import AnvilProvider, { AnvilContext } from '../../components/AnvilContext';
-import { LARGE_MOBILE_BREAKPOINT } from '../../lib/consts/DEFAULT_THEME';
+import SharedStorage from '../../components/SharedStorage';
+import Spinner from '../../components/Spinner';
 import useWindowDimensions from '../../hooks/useWindowDimenions';

 const PREFIX = 'Anvil';
@ -62,26 +64,16 @@ const Anvil = (): JSX.Element => {

  const { anvil_uuid: queryAnvilUUID } = router.query;
  const { uuid: contextAnvilUUID, setAnvilUuid } = useContext(AnvilContext);
-  const { data } = periodicFetch<AnvilList>(
+  const { data, isLoading } = periodicFetch<AnvilList>(
    `${process.env.NEXT_PUBLIC_API_URL}/get_anvils`,
  );

-  useEffect(() => {
-    if (contextAnvilUUID === '') {
-      setAnvilUuid(queryAnvilUUID?.toString() || '');
-    }
-  }, [contextAnvilUUID, queryAnvilUUID, setAnvilUuid]);
+  const contentLayoutElement = useMemo(() => {
+    let result;

-  return (
-    <StyledDiv>
-      <Head>
-        <title>Anvil</title>
-      </Head>
-      <AnvilProvider>
-        <Header />
-        {data?.anvils &&
-          width &&
-          (width > LARGE_MOBILE_BREAKPOINT ? (
+    if (data && width) {
+      result =
+        width > LARGE_MOBILE_BREAKPOINT ? (
          <Box className={classes.container}>
            <Box className={classes.child}>
              <Anvils list={data} />
@ -113,7 +105,45 @@ const Anvil = (): JSX.Element => {
              <Memory />
            </Box>
          </Box>
-          ))}
+        );
+    }
+
+    return result;
+  }, [data, width]);
+  const contentAreaElement = useMemo(
+    () =>
+      isLoading ? (
+        <Panel
+          sx={{
+            marginLeft: { xs: '1em', sm: 'auto' },
+            marginRight: { xs: '1em', sm: 'auto' },
+            marginTop: 'calc(50vh - 10em)',
+            maxWidth: { xs: undefined, sm: '60%', md: '50%', lg: '40%' },
+            minWidth: 'fit-content',
+          }}
+        >
+          <Spinner sx={{ margin: '2em 2.4em' }} />
+        </Panel>
+      ) : (
+        contentLayoutElement
+      ),
+    [contentLayoutElement, isLoading],
+  );
+
+  useEffect(() => {
+    if (contextAnvilUUID === '') {
+      setAnvilUuid(queryAnvilUUID?.toString() || '');
+    }
+  }, [contextAnvilUUID, queryAnvilUUID, setAnvilUuid]);
+
+  return (
+    <StyledDiv>
+      <Head>
+        <title>Anvil</title>
+      </Head>
+      <AnvilProvider>
+        <Header />
+        {contentAreaElement}
      </AnvilProvider>
    </StyledDiv>
  );