load a top level react node and everything else under it.

src/Locations/ui/GenericLocation.tsx

@@ -20,7 +20,6 @@ import { Location } from "../Location";
 import { LocationType } from "../LocationTypeEnum";
 import { CityName } from "../data/CityNames";
 
-import { IEngine } from "../../IEngine";
 import { IRouter } from "../../ui/Router";
 import { Settings } from "../../Settings/Settings";
 

src/Locations/ui/SpecialLocation.tsx

@@ -17,7 +17,6 @@ import { CreateCorporationPopup } from "../../Corporation/ui/CreateCorporationPo
 import { createPopup } from "../../ui/React/createPopup";
 import { LocationName } from "../data/LocationNames";
 
-import { IEngine } from "../../IEngine";
 import { IPlayer } from "../../PersonObjects/IPlayer";
 import { use } from "../../ui/Context";
 

src/engine.d.ts

@@ -0,0 +1,2 @@
+export declare function load(cb: () => void): void;
+export declare const Engine: any;

src/engine.jsx

@@ -36,6 +36,7 @@ import { Terminal } from "./Terminal";
 import { Sleeve } from "./PersonObjects/Sleeve/Sleeve";
 import { Locations } from "./Locations/Locations";
 import { LocationName } from "./Locations/data/LocationNames";
+import { LoadingScreen } from "./ui/LoadingScreen";
 
 import { Money } from "./ui/React/Money";
 import { Hashes } from "./ui/React/Hashes";
@@ -399,14 +400,6 @@ const Engine = {
       // Start interactive tutorial
       iTutorialStart();
     }
-
-    ReactDOM.render(
-      <Theme>
-        <GameRoot terminal={Terminal} engine={this} player={Player} />
-      </Theme>,
-      document.getElementById("mainmenu-container"),
-    );
-    Router.toTerminal();
   },
 
   start: function () {
@@ -429,8 +422,7 @@ const Engine = {
   },
 };
 
-var indexedDbRequest;
-window.onload = function () {
+function load(cb) {
   if (!window.indexedDB) {
     return Engine.load(null); // Will try to load from localstorage
   }
@@ -445,7 +437,8 @@ window.onload = function () {
   indexedDbRequest.onerror = function (e) {
     console.error("Error opening indexedDB: ");
     console.error(e);
-    return Engine.load(null); // Try to load from localstorage
+    Engine.load(null); // Try to load from localstorage
+    cb();
   };
 
   indexedDbRequest.onsuccess = function (e) {
@@ -455,11 +448,13 @@ window.onload = function () {
     var request = objectStore.get("save");
     request.onerror = function (e) {
       console.error("Error in Database request to get savestring: " + e);
-      return Engine.load(null); // Try to load from localstorage
+      Engine.load(null); // Try to load from localstorage
+      cb();
     };
 
     request.onsuccess = function () {
       Engine.load(request.result);
+      cb();
     };
   };
 
@@ -467,6 +462,15 @@ window.onload = function () {
     const db = e.target.result;
     db.createObjectStore("savestring");
   };
-};
+}
 
-export { Engine };
+var indexedDbRequest;
+
+ReactDOM.render(
+  <Theme>
+    <LoadingScreen />
+  </Theme>,
+  document.getElementById("mainmenu-container"),
+);
+
+export { Engine, load };

src/ui/GameRoot.tsx

@@ -63,7 +63,6 @@ import { TravelAgencyRoot } from "../Locations/ui/TravelAgencyRoot";
 import { StockMarketRoot } from "../StockMarket/ui/StockMarketRoot";
 import { BitverseRoot } from "../BitNode/ui/BitverseRoot";
 import { CharacterOverview } from "./React/CharacterOverview";
-import { LoadingScreen } from "./LoadingScreen";
 import { BladeburnerCinematic } from "../Bladeburner/ui/BladeburnerCinematic";
 import { workerScripts } from "../Netscript/WorkerScripts";
 
@@ -186,7 +185,7 @@ function determineStartPage(player: IPlayer): Page {
 
 export function GameRoot({ player, engine, terminal }: IProps): React.ReactElement {
   const classes = useStyles();
-  const [page, setPage] = useState(/*determineStartPage(player)*/ Page.Loading);
+  const [page, setPage] = useState(determineStartPage(player));
   const setRerender = useState(0)[1];
   const [faction, setFaction] = useState<Faction>(
     player.currentWorkFactionName ? Factions[player.currentWorkFactionName] : (undefined as unknown as Faction),
@@ -288,9 +287,7 @@ export function GameRoot({ player, engine, terminal }: IProps): React.ReactEleme
             <InteractiveTutorialRoot />
           )}
         </Overview>
-        {page === Page.Loading ? (
-          <LoadingScreen />
-        ) : page === Page.BitVerse ? (
+        {page === Page.BitVerse ? (
           <BitverseRoot flume={flume} enter={enterBitNode} quick={quick} />
         ) : page === Page.Infiltration ? (
           <InfiltrationRoot location={location} />

src/ui/LoadingScreen.tsx

@@ -7,8 +7,15 @@ import { Theme } from "@mui/material";
 import makeStyles from "@mui/styles/makeStyles";
 import createStyles from "@mui/styles/createStyles";
 
+import { Terminal } from "../Terminal";
+import { Engine } from "../engine";
+import { Player } from "../Player";
+import { GameRoot } from "./GameRoot";
+
 import { CONSTANTS } from "../Constants";
 
+import { load } from "../engine";
+
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     center: {
@@ -22,13 +29,26 @@ const useStyles = makeStyles((theme: Theme) =>
 export function LoadingScreen(): React.ReactElement {
   const classes = useStyles();
   const [show, setShow] = useState(false);
+  const [loaded, setLoaded] = useState(false);
 
+  console.log("renredering");
   useEffect(() => {
     const id = setTimeout(() => {
-      setShow(true);
+      if (!loaded) setShow(true);
     }, 2000);
     return () => clearTimeout(id);
+  });
+
+  useEffect(() => {
+    load(() => {
+      setLoaded(true);
+    });
   }, []);
+
+  if (loaded) {
+    return <GameRoot terminal={Terminal} engine={Engine} player={Player} />;
+  }
+
   return (
     <Grid container direction="column" justifyContent="center" alignItems="center" style={{ minHeight: "100vh" }}>
       <Grid item>

src/ui/Router.ts

@@ -1,5 +1,4 @@
 import { Faction } from "../Faction/Faction";
-import { LocationName } from "../Locations/data/LocationNames";
 import { Location } from "../Locations/Location";
 
 /**

src/utils/EventEmitter.ts

@@ -1,7 +1,6 @@
 /**
  * Generic Event Emitter class following a subscribe/publish paradigm.
  */
-import { IMap } from "../types";
 
 type cbFn = (...args: any[]) => any;
 
@@ -19,7 +18,7 @@ export interface ISubscriber {
 
 function uuidv4(): string {
   return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function (c) {
-    var r = (Math.random() * 16) | 0,
+    const r = (Math.random() * 16) | 0,
       v = c == "x" ? r : (r & 0x3) | 0x8;
     return v.toString(16);
   });