restore terminal state when loading term view

frontend/app/view/term.tsx

@@ -40,14 +40,21 @@ function getThemeFromCSSVars(el: Element): ITheme {
     return theme;
 }
 
+type InitialLoadDataType = {
+    loaded: boolean;
+    heldData: Uint8Array[];
+};
+
 const TerminalView = ({ blockId }: { blockId: string }) => {
     const connectElemRef = React.useRef<HTMLDivElement>(null);
     const termRef = React.useRef<Terminal>(null);
+    const initialLoadRef = React.useRef<InitialLoadDataType>({ loaded: false, heldData: [] });
 
     React.useEffect(() => {
         if (!connectElemRef.current) {
             return;
         }
+        console.log("terminal created");
         const term = new Terminal({
             theme: getThemeFromCSSVars(connectElemRef.current),
             fontSize: 12,
@@ -89,7 +96,11 @@ const TerminalView = ({ blockId }: { blockId: string }) => {
         blockSubject.subscribe((data) => {
             // base64 decode
             const decodedData = base64ToArray(data.ptydata);
-            term.write(decodedData);
+            if (initialLoadRef.current.loaded) {
+                term.write(decodedData);
+            } else {
+                initialLoadRef.current.heldData.push(decodedData);
+            }
         });
 
         return () => {
@@ -99,6 +110,39 @@ const TerminalView = ({ blockId }: { blockId: string }) => {
         };
     }, [connectElemRef.current]);
 
+    React.useEffect(() => {
+        if (!termRef.current) {
+            return;
+        }
+        // load data from blockfile
+        const startTs = Date.now();
+        let loadedBytes = 0;
+        const localTerm = termRef.current; // avoids devmode double effect running issue (terminal gets created twice)
+        const usp = new URLSearchParams();
+        usp.set("blockid", blockId);
+        usp.set("name", "main");
+        fetch("/wave/blockfile?" + usp.toString())
+            .then((resp) => {
+                if (resp.ok) {
+                    return resp.arrayBuffer();
+                }
+                console.log("error loading blockfile", resp.status, resp.statusText);
+            })
+            .then((data: ArrayBuffer) => {
+                const uint8View = new Uint8Array(data);
+                localTerm.write(uint8View);
+                loadedBytes = uint8View.byteLength;
+            })
+            .finally(() => {
+                initialLoadRef.current.heldData.forEach((data) => {
+                    localTerm.write(data);
+                });
+                initialLoadRef.current.loaded = true;
+                initialLoadRef.current.heldData = [];
+                console.log(`terminal loaded blockfile ${loadedBytes} bytes, ${Date.now() - startTs}ms`);
+            });
+    }, [termRef.current]);
+
     return (
         <div className="view-term">
             <div key="conntectElem" className="term-connectelem" ref={connectElemRef}></div>