ram check is debounced

src/ScriptEditor/ui/ScriptEditorRoot.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from "react";
+import React, { useState, useEffect, useRef, useMemo } from "react";
 import Editor from "@monaco-editor/react";
 import * as monaco from "monaco-editor";
 type IStandaloneCodeEditor = monaco.editor.IStandaloneCodeEditor;
@@ -21,6 +21,7 @@ import { NetscriptFunctions } from "../../NetscriptFunctions";
 import { WorkerScript } from "../../Netscript/WorkerScript";
 import { Settings } from "../../Settings/Settings";
 import { iTutorialNextStep, ITutorial, iTutorialSteps } from "../../InteractiveTutorial";
+import { debounce } from "lodash";
 
 import Button from "@mui/material/Button";
 import Typography from "@mui/material/Typography";
@@ -84,6 +85,7 @@ export function Root(props: IProps): React.ReactElement {
   const [filename, setFilename] = useState(props.filename ? props.filename : lastFilename);
   const [code, setCode] = useState<string>(props.filename ? props.code : lastCode);
   const [ram, setRAM] = useState("RAM: ???");
+  const [updatingRam, setUpdatingRam] = useState(false);
   const [optionsOpen, setOptionsOpen] = useState(false);
   const [options, setOptions] = useState<Options>({
     theme: Settings.MonacoTheme,
@@ -91,6 +93,15 @@ export function Root(props: IProps): React.ReactElement {
     fontSize: Settings.MonacoFontSize,
   });
 
+  const debouncedSetRAM = useMemo(
+    () =>
+      debounce((s) => {
+        setRAM(s);
+        setUpdatingRam(false);
+      }, 300),
+    [],
+  );
+
   // store the last known state in case we need to restart without nano.
   useEffect(() => {
     if (props.filename === undefined) return;
@@ -213,38 +224,40 @@ export function Root(props: IProps): React.ReactElement {
       lastPosition = editorRef.current.getPosition();
     }
     setCode(newCode);
+    updateRAM(newCode);
   }
 
-  async function updateRAM(): Promise<void> {
+  // calculate it once the first time the file is loaded.
-    const codeCopy = code + "";
+  useEffect(() => {
+    updateRAM(code);
+  }, []);
+
+  async function updateRAM(newCode: string): Promise<void> {
+    setUpdatingRam(true);
+    const codeCopy = newCode + "";
     const ramUsage = await calculateRamUsage(codeCopy, props.player.getCurrentServer().scripts);
     if (ramUsage > 0) {
-      setRAM("RAM: " + numeralWrapper.formatRAM(ramUsage));
+      debouncedSetRAM("RAM: " + numeralWrapper.formatRAM(ramUsage));
       return;
     }
     switch (ramUsage) {
       case RamCalculationErrorCode.ImportError: {
-        setRAM("RAM: Import Error");
+        debouncedSetRAM("RAM: Import Error");
         break;
       }
       case RamCalculationErrorCode.URLImportError: {
-        setRAM("RAM: HTTP Import Error");
+        debouncedSetRAM("RAM: HTTP Import Error");
         break;
       }
       case RamCalculationErrorCode.SyntaxError:
       default: {
-        setRAM("RAM: Syntax Error");
+        debouncedSetRAM("RAM: Syntax Error");
         break;
       }
     }
     return new Promise<void>(() => undefined);
   }
 
-  useEffect(() => {
-    const id = setInterval(updateRAM, 1000);
-    return () => clearInterval(id);
-  }, [code]);
-
   useEffect(() => {
     function maybeSave(event: KeyboardEvent): void {
       if (Settings.DisableHotkeys) return;
@@ -326,7 +339,9 @@ export function Root(props: IProps): React.ReactElement {
       />
       <Box display="flex" flexDirection="row" sx={{ m: 1 }} alignItems="center">
         <Button onClick={beautify}>Beautify</Button>
-        <Typography sx={{ mx: 1 }}>{ram}</Typography>
+        <Typography color={updatingRam ? "secondary" : "primary"} sx={{ mx: 1 }}>
+          {ram}
+        </Typography>
         <Button onClick={save}>Save & Close (Ctrl/Cmd + b)</Button>
         <Link sx={{ mx: 1 }} target="_blank" href="https://bitburner.readthedocs.io/en/latest/index.html">
           <Typography> Netscript Documentation</Typography>