Switch LoadingAnimation to use MUI style

package.json

@@ -37,7 +37,8 @@
     "prettier:check": "prettier --check . **/*.svg",
     "check:spelling": "cspell --cache --no-progress '**/*'",
     "testonly": "npm run build:demo && npm pack && docker-compose up --abort-on-container-exit --build test",
-    "declarations": "tsc --emitDeclarationOnly -p tsconfig.lib.json"
+    "declarations": "tsc --emitDeclarationOnly -p tsconfig.lib.json",
+    "update-snapshots": "docker-compose up --build update-snapshots"
   },
   "peerDependencies": {
     "graphql": ">=16.5.0",

src/components/GraphViewport.tsx

@@ -120,27 +120,33 @@ export default class GraphViewport extends Component<
   render() {
     const isLoading = this.state.svgViewport == null;
     return (
-      <>
+      <Box
+        sx={(theme) => ({
+          flex: 1,
+          position: 'relative',
+          display: 'inline-block',
+          width: '100%',
+          height: '100%',
+          maxHeight: '100%',
+
+          [theme.breakpoints.down('md')]: {
+            height: '50%',
+            maxWidth: 'none',
+          },
+        })}
+      >
         <Box
           ref={this._containerRef}
-          sx={(theme) => ({
+          sx={{
+            height: '100%',
             '& > svg': {
               height: '100%',
               width: '100%',
             },
-            [theme.breakpoints.down('md')]: {
-              height: '50%',
-              width: '100%',
-              maxWidth: 'none',
-            },
-            [theme.breakpoints.up('md')]: {
-              flex: 1,
-              maxHeight: '100%',
-            },
-          })}
+          }}
         />
         {isLoading && <LoadingAnimation />}
-      </>
+      </Box>
     );
   }
 

src/components/Voyager.css

@@ -33,6 +33,7 @@
 
   & > .menu-content {
     position: absolute;
+    z-index: 5;
     bottom: var(--panel-spacing);
     left: calc(var(--doc-panel-width) + var(--panel-spacing));
     background: var(--doc-panel-bg-color);

src/components/utils/LoadingAnimation.tsx

@@ -1,14 +1,35 @@
-import './LoadingAnimation.css';
+import { SvgIcon, Typography } from '@mui/material';
+import Stack from '@mui/material/Stack';
 
 import VoyagerIcon from '../icons/logo-with-signals.svg';
 
 export default function LoadingAnimation() {
   return (
-    <div role="status" className="loading-box">
-      <span className="loading-animation">
-        <VoyagerIcon />
-        <h1> Transmitting... </h1>
-      </span>
-    </div>
+    <Stack
+      role="status"
+      alignItems="center"
+      justifyContent="center"
+      sx={{
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        background: 'rgba(0, 0, 0, 0.8)',
+        zIndex: 10,
+
+        color: 'white',
+        height: '100%',
+        width: '100%',
+      }}
+    >
+      <SvgIcon
+        inheritViewBox
+        component={VoyagerIcon}
+        color="secondary"
+        sx={{ width: 180, height: 180 }}
+      />
+      <Typography variant="h4" color="secondary" letterSpacing={4} fontWeight="medium">
+        Transmitting...
+      </Typography>
+    </Stack>
   );
 }