improvements to startup and disconnect modal

src/emain.ts

@@ -400,7 +400,17 @@ function getFetchHeaders() {
     };
 }
 
-function getClientData() {
+async function getClientDataPoll(loopNum : number) {
+    let lastTime = (loopNum >= 6);
+    let cdata = await getClientData(!lastTime, loopNum);
+    if (lastTime || cdata != null) {
+        return cdata;
+    }
+    await sleep(1000);
+    return getClientDataPoll(loopNum+1);
+}
+
+function getClientData(willRetry : boolean, retryNum : number) {
     let url = getBaseHostPort() + "/api/get-client-data";
     let fetchHeaders = getFetchHeaders();
     return fetch(url, {headers: fetchHeaders}).then((resp) => handleJsonFetchResponse(url, resp)).then((data) => {
@@ -409,7 +419,11 @@ function getClientData() {
         }
         return data.data;
     }).catch((err) => {
-        console.log("error getting client-data", err);
+        if (willRetry) {
+            console.log("error getting client-data from local-server, will retry", "(" + retryNum + ")");
+            return null;
+        }
+        console.log("error getting client-data from local-server, failed: ", err);
         return null;
     });
 }
@@ -498,7 +512,7 @@ electron.ipcMain.on("context-editmenu", (event, {x, y}, opts) => {
 async function createMainWindowWrap() {
     let clientData = null;
     try {
-        clientData = await getClientData();
+        clientData = await getClientDataPoll(1);
     }
     catch (e) {
         console.log("error getting local-server clientdata", e.toString());
@@ -531,7 +545,6 @@ function runActiveTimer() {
     setTimeout(runActiveTimer, 60000);
 }
 
-
 // ====== MAIN ====== //
 
 (async () => {
@@ -548,7 +561,6 @@ function runActiveTimer() {
     catch (e) {
         console.log(e.toString());
     }
-    await sleep(1000);  // TODO remove this sleep, poll getClientData() in createMainWindow
     setTimeout(runActiveTimer, 5000); // start active timer, wait 5s just to be safe
     await app.whenReady();
     await createMainWindowWrap();

src/main.tsx

@@ -2635,14 +2635,14 @@ class DisconnectedModal extends React.Component<{}, {}> {
         let logLine : string = null;
         let idx : number = 0;
         return (
-            <div className="sc-modal disconnected-modal modal is-active">
+            <div className="prompt-modal disconnected-modal modal is-active">
                 <div className="modal-background"></div>
-                <div className="modal-content message">
+                <div className="modal-content">
                     <div className="message-header">
-                        <p>Prompt Client Disconnected</p>
+                        <div className="modal-title">Prompt Client Disconnected</div>
                     </div>
                     <If condition={this.showLog.get()}>
-                        <div className="message-content">
+                        <div className="inner-content">
                             <div className="ws-log" ref={this.logRef}>
                                 <For each="logLine" index="idx" of={GlobalModel.ws.wsLog}>
                                     <div key={idx} className="ws-logline">{logLine}</div>
@@ -2650,7 +2650,7 @@ class DisconnectedModal extends React.Component<{}, {}> {
                             </div>
                         </div>
                     </If>
-                    <div className="message-footer">
+                    <footer>
                         <div className="footer-text-link" style={{marginLeft: 10}} onClick={this.handleShowLog}>
                             <If condition={!this.showLog.get()}>
                                 <i className="fa-sharp fa-solid fa-plus"/> Show Log
@@ -2659,7 +2659,7 @@ class DisconnectedModal extends React.Component<{}, {}> {
                                 <i className="fa-sharp fa-solid fa-minus"/> Hide Log
                             </If>
                         </div>
-                        <div className="spacer"/>
+                        <div className="flex-spacer"/>
                         <button onClick={this.tryReconnect} className="button">
                             <span className="icon">
                                 <i className="fa-sharp fa-solid fa-rotate"/>
@@ -2672,7 +2672,7 @@ class DisconnectedModal extends React.Component<{}, {}> {
                             </span>
                             <span>Restart Server</span>
                         </button>
-                    </div>
+                    </footer>
                 </div>
             </div>
         );

src/model.ts

@@ -2402,7 +2402,7 @@ class Model {
         getApi().onLocalServerStatusChange(this.onLocalServerStatusChange.bind(this));
         document.addEventListener("keydown", this.docKeyDownHandler.bind(this));
         document.addEventListener("selectionchange", this.docSelectionChangeHandler.bind(this));
-        setTimeout(() => this.getClientData(), 10);
+        setTimeout(() => this.getClientDataLoop(1), 10);
     }
 
     registerRendererPlugin(plugin : RendererPluginType) {
@@ -2936,6 +2936,24 @@ class Model {
         return (update.info != null || update.history != null);
     }
 
+    getClientDataLoop(loopNum : number) : void {
+        this.getClientData();
+        if (this.clientData.get() != null) {
+            return;
+        }
+        let timeoutMs = 1000;
+        if (loopNum > 5) {
+            timeoutMs = 3000;
+        }
+        if (loopNum > 10) {
+            timeoutMs = 10000;
+        }
+        if (loopNum > 15) {
+            timeoutMs = 30000;
+        }
+        setTimeout(() => this.getClientDataLoop(loopNum+1), timeoutMs);
+    }
+
     getClientData() : void {
         let url = sprintf(GlobalModel.getBaseHostPort() + "/api/get-client-data");
         let fetchHeaders = this.getFetchHeaders();

src/sh2.less

@@ -147,7 +147,7 @@ body::-webkit-scrollbar {
                 }
 
                 &.should-fade {
-                    opacity: 0;
+                    opacity: 1.0;
                     animation: fade-in 2.5s;
                 }
             }
@@ -2403,52 +2403,20 @@ input[type=checkbox] {
     .mono-font(inherit, 700);
 }
 
-.sc-modal {
+.disconnected-modal {
     .modal-content {
-        padding: 10px;
-        background-color: #666;
-
-        .message-header {
-            .mono-font();
-            font-size: 16px;
-            margin-bottom: 10px;
-        }
-
-        .message-content {
-            flex-grow: 1;
-            max-height: 80%;
-            overflow-y: auto;
-            display: flex;
-            flex-direction: column;
-            margin-bottom: 10px;
-        }
-
-        .message-footer {
-            border-top: 1px solid #666;
-            display: flex;
-            flex-direction: row;
-            justify-content: center;
-            align-items: center;
-
-            .spacer {
-                flex-grow: 1;
-            }
-
+        footer {
             .footer-text-link {
                 .mono-font(12px);
                 color: @term-white;
                 cursor: pointer;
             }
         }
-
-        .button {
-            .mono-font();
-        }
     }
 }
 
 .disconnected-modal {
-    .message-content {
+    .inner-content {
         .ws-log {
             padding: 5px;
             background-color: black;