get loading screen inside GameRoot

src/ui/LoadingScreen.tsx

@@ -0,0 +1,49 @@
+import React, { useState, useEffect } from "react";
+import CircularProgress from "@mui/material/CircularProgress";
+import Typography from "@mui/material/Typography";
+import Grid from "@mui/material/Grid";
+import Paper from "@mui/material/Paper";
+import { Theme } from "@mui/material";
+import makeStyles from "@mui/styles/makeStyles";
+import createStyles from "@mui/styles/createStyles";
+
+import { CONSTANTS } from "../Constants";
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    center: {
+      position: "fixed",
+      top: "50%",
+      left: "50%",
+    },
+  }),
+);
+
+export function LoadingScreen(): React.ReactElement {
+  const classes = useStyles();
+  const [show, setShow] = useState(false);
+
+  useEffect(() => {
+    const id = setTimeout(() => {
+      setShow(true);
+    }, 2000);
+    return () => clearTimeout(id);
+  }, []);
+  return (
+    <Grid container direction="column" justifyContent="center" alignItems="center" style={{ minHeight: "100vh" }}>
+      <Grid item>
+        <CircularProgress size={150} color="primary" />
+      </Grid>
+      <Grid item>
+        <Typography variant="h3">Loading Bitburner v{CONSTANTS.Version}</Typography>
+      </Grid>
+      {show && (
+        <Grid item>
+          <Typography>
+            If the game fails to load, consider <a href="?noScripts">killing all scripts</a>
+          </Typography>
+        </Grid>
+      )}
+    </Grid>
+  );
+}