Improve ScriptEditor responsiveness

src/ScriptEditor/ui/ScriptEditorRoot.tsx

@@ -142,25 +142,6 @@ export function Root(props: IProps): React.ReactElement {
     if (currentScript === undefined) currentScript = null;
   }
 
-  const [dimensions, setDimensions] = useState({
-    height: window.innerHeight,
-    width: window.innerWidth,
-  });
-  useEffect(() => {
-    const debouncedHandleResize = debounce(function handleResize() {
-      setDimensions({
-        height: window.innerHeight,
-        width: window.innerWidth,
-      });
-    }, 250);
-
-    window.addEventListener("resize", debouncedHandleResize);
-
-    return () => {
-      window.removeEventListener("resize", debouncedHandleResize);
-    };
-  }, []);
-
   useEffect(() => {
     if (currentScript !== null) {
       updateRAM(currentScript.code);
@@ -815,7 +796,6 @@ export function Root(props: IProps): React.ReactElement {
   //  5px padding for top of editor
   //  44px bottom tool bar + 16px margin
   //  + vim bar 34px
-  const editorHeight = dimensions.height - (130 + (options.vim ? 34 : 0));
   const tabsMaxWidth = 1640;
   const tabMargin = 5;
   const tabMaxWidth = filteredOpenScripts.length ? tabsMaxWidth / filteredOpenScripts.length - tabMargin : 0;
@@ -951,7 +931,7 @@ export function Root(props: IProps): React.ReactElement {
           beforeMount={beforeMount}
           onMount={onMount}
           loading={<Typography>Loading script editor!</Typography>}
-          height={`${editorHeight}px`}
+          height={`calc(100vh - ${130 + (options.vim ? 34 : 0)}px)`}
           defaultLanguage="javascript"
           defaultValue={""}
           onChange={updateCode}

src/ui/GameRoot.tsx

@@ -104,10 +104,10 @@ const useStyles = makeStyles((theme: Theme) =>
       "scrollbar-width": "none" /* for Firefox */,
       margin: theme.spacing(0),
       flexGrow: 1,
-      display: "block",
       padding: "8px",
       minHeight: "100vh",
       boxSizing: "border-box",
+      width: "1px",
     },
   }),
 );

src/ui/LoadingScreen.tsx

@@ -2,10 +2,6 @@ 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 Box from "@mui/material/Box";
-import { Theme } from "@mui/material/styles";
-import makeStyles from "@mui/styles/makeStyles";
-import createStyles from "@mui/styles/createStyles";
 
 import { Terminal } from "../Terminal";
 import { load } from "../db";
@@ -18,16 +14,7 @@ import { ActivateRecoveryMode } from "./React/RecoveryRoot";
 import { hash } from "../hash/hash";
 import { pushGameReady } from "../Electron";
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      backgroundColor: theme.colors.backgroundprimary,
-    },
-  }),
-);
-
 export function LoadingScreen(): React.ReactElement {
-  const classes = useStyles();
   const [show, setShow] = useState(false);
   const [loaded, setLoaded] = useState(false);
 
@@ -69,9 +56,7 @@ export function LoadingScreen(): React.ReactElement {
     doLoad();
   }, []);
 
-  return (
+  return loaded ? (
-    <Box className={classes.root}>
-      {loaded ? (
     <GameRoot terminal={Terminal} engine={Engine} player={Player} />
   ) : (
     <Grid container direction="column" justifyContent="center" alignItems="center" style={{ minHeight: "100vh" }}>
@@ -89,7 +74,5 @@ export function LoadingScreen(): React.ReactElement {
         </Grid>
       )}
     </Grid>
-      )}
-    </Box>
   );
 }