From a5c921a73010894f30a8e13e0f4866340098ca17 Mon Sep 17 00:00:00 2001
From: sawka <mike.sawka@gmail.com>
Date: Mon, 2 Jan 2023 22:54:40 -0800
Subject: [PATCH] new loading spinner, fix bug with terminal not displaying
 (complicated effect via CharSizeService interacting with display:none and dom
 observer with 0 height)

---
 package.json |  2 +-
 src/emain.ts | 12 +++++++++++-
 src/main.tsx | 23 +++++++++++++++++++----
 src/model.ts |  2 +-
 src/sh2.less | 53 +++++++++++++++++++++++++++++++++++++++++++++++-----
 src/term.ts  |  2 +-
 6 files changed, 81 insertions(+), 13 deletions(-)

diff --git a/package.json b/package.json
index e276ecb34..64d2401a3 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "Prompt",
-  "version": "1.0.0",
+  "version": "0.1.0",
   "main": "dist/emain.js",
   "license": "Proprietary",
   "dependencies": {
diff --git a/src/emain.ts b/src/emain.ts
index c2c089393..ff108fb36 100644
--- a/src/emain.ts
+++ b/src/emain.ts
@@ -19,6 +19,7 @@ ensureDir(scHome);
 let DistDir = (isDev ? "dist-dev" : "dist");
 let GlobalAuthKey = "";
 let instanceId = uuidv4();
+let oldConsoleLog = console.log;
 
 // these are either "darwin/amd64" or "darwin/arm64"
 // normalize darwin/x64 to darwin/amd64 for GOARCH compatibility
@@ -43,7 +44,12 @@ if (isDev) {
 }
 logger = winston.createLogger(loggerConfig);
 function log(...msg) {
-    logger.info(util.format(...msg));
+    try {
+        logger.info(util.format(...msg));
+    }
+    catch (e) {
+        oldConsoleLog(...msg);
+    }
 }
 console.log = log;
 console.log(sprintf("prompt-app starting, PROMPT_HOME=%s, apppath=%s arch=%s/%s", scHome, getAppBasePath(), unamePlatform, unameArch));
@@ -56,6 +62,10 @@ const DevLocalServerPath = "/Users/mike/prompt-dev/local-server";
 let localServerProc = null;
 let localServerShouldRestart = false;
 
+electron.dialog.showErrorBox = (title, content) => {
+    oldConsoleLog("ERROR", title, content);
+};
+
 // must match golang
 function getPromptHomeDir() {
     let scHome = process.env.PROMPT_HOME;
diff --git a/src/main.tsx b/src/main.tsx
index 308d9f7ef..3eea1f88f 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -494,7 +494,8 @@ class LineCmd extends React.Component<{sw : ScreenWindow, line : LineType, width
                         <div key="term-block" className="term-block" onClick={this.clickTermBlock}></div>
                     </If>
                     <div key="term-connectelem" className="terminal-connectelem" id={"term-" + getLineId(line)} data-cmdid={line.cmdid} style={{height: termHeight}}></div>
-                    <If condition={!termLoaded}><div key="term-loading" className="terminal-loading-message">(loading)</div></If>
+                    <If condition={!termLoaded && false}><div key="term-loading" className="terminal-loading-message">...</div></If>
+                    <If condition={!termLoaded}><LoadingSpinner/></If>
                 </div>
                 <If condition={cmd.getRtnState()}>
                     <div key="rtnstate" className="cmd-rtnstate" style={{visibility: ((cmd.getStatus() == "done") ? "visible" : "hidden")}}>
@@ -1936,9 +1937,14 @@ class LinesView extends React.Component<{sw : ScreenWindow, width : number, line
             let lineElem = lineElemArr[i];
             let lineTop = lineElem.offsetTop;
             let lineBot = lineElem.offsetTop + lineElem.offsetHeight;
-            let maxTop = Math.max(containerTop, lineTop);
-            let minBot = Math.min(containerBot, lineBot);
-            newMap.set(lineElem.dataset.linenum, (maxTop < minBot));
+            let isVis = false;
+            if (lineTop >= containerTop && lineTop <= containerBot) {
+                isVis = true;
+            }
+            if (lineBot >= containerTop && lineBot <= containerBot) {
+                isVis = true
+            }
+            newMap.set(lineElem.dataset.linenum, isVis);
         }
         mobx.action(() => {
             for (let [k, v] of newMap) {
@@ -2666,6 +2672,15 @@ class DisconnectedModal extends React.Component<{}, {}> {
     }
 }
 
+@mobxReact.observer
+class LoadingSpinner extends React.Component<{}, {}> {
+    render() {
+        return (
+            <div className="loading-spinner"><div></div><div></div><div></div><div></div></div>
+        );
+    }
+}
+
 @mobxReact.observer
 class Main extends React.Component<{}, {}> {
     constructor(props : any) {
diff --git a/src/model.ts b/src/model.ts
index e43c1dfca..7842d9d19 100644
--- a/src/model.ts
+++ b/src/model.ts
@@ -547,7 +547,7 @@ class ScreenWindow {
         let cols = widthToCols(width);
         let usedRows = GlobalModel.getTUR(this.sessionId, cmdId, cols);
         termWrap = new TermWrap(elem, {
-            termContext: {sessionId: this.sessionId, cmdId: cmdId},
+            termContext: {sessionId: this.sessionId, cmdId: cmdId, lineNum: line.linenum},
             usedRows: usedRows,
             termOpts: cmd.getTermOpts(),
             winSize: {height: 0, width: width},
diff --git a/src/sh2.less b/src/sh2.less
index 00dbc1d7d..2dcdcdd39 100644
--- a/src/sh2.less
+++ b/src/sh2.less
@@ -452,13 +452,12 @@ html, body, #main {
     .terminal-wrapper {
         background-color: #000;
         padding: 2px 10px 5px 4px;
-        margin-left: -4px;
-        margin-right: 8px;
-        margin-top: 4px;
+        margin: 4px 8px 0 -4px;
         align-self: flex-start;
 
         &.zero-height {
-            display: none;
+            padding: 0;
+            margin: 0;
         }
 
         .terminal-connectelem {
@@ -476,7 +475,7 @@ html, body, #main {
 
         .terminal-loading-message {
             position: absolute;
-            top: 60px;
+            top: calc(40% - 8px);
             left: 30px;
             .mono-font();
         }
@@ -1510,3 +1509,47 @@ input[type=checkbox] {
 .flex-spacer {
     flex-grow: 1;
 }
+
+
+.loading-spinner {
+    display: inline-block;
+    position: absolute;
+    top: calc(40% - 8px);
+    left: 30px;
+    width: 20px;
+    height: 20px;
+
+    div {
+        box-sizing: border-box;
+        display: block;
+        position: absolute;
+        width: 16px;
+        height: 16px;
+        margin: 2px;
+        border: 2px solid #777;
+        border-radius: 50%;
+        animation: loader-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+        border-color: #777 transparent transparent transparent;
+    }
+
+    div:nth-child(1) {
+        animation-delay: -0.45s;
+    }
+    
+    div:nth-child(2) {
+        animation-delay: -0.3s;
+    }
+    
+    div:nth-child(3) {
+        animation-delay: -0.15s;
+    }
+}
+
+@keyframes loader-ring {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}
diff --git a/src/term.ts b/src/term.ts
index 232fe72fc..d38db9958 100644
--- a/src/term.ts
+++ b/src/term.ts
@@ -20,7 +20,7 @@ type WindowSize = {
 const MinTermCols = 10;
 const MaxTermCols = 1024;
 
-type TermContext = {sessionId? : string, cmdId? : string, remoteId? : string};
+type TermContext = {sessionId? : string, cmdId? : string, remoteId? : string, lineNum? : number};
 
 type TermWrapOpts = {
     termContext : TermContext,