deal with line hide/show

src/main.tsx

@@ -318,6 +318,7 @@ class LineCmd extends React.Component<{sw : ScreenWindow, line : LineType, width
     }
 
     componentDidMount() {
+        this.componentDidUpdate();
     }
 
     componentWillUnmount() {
@@ -384,6 +385,9 @@ class LineCmd extends React.Component<{sw : ScreenWindow, line : LineType, width
         if (elem != null) {
             curHeight = elem.offsetHeight;
         }
+        if (snapshot == null) {
+            snapshot = {height: 0};
+        }
         if (snapshot.height != curHeight && this.props.onHeightChange != null) {
             this.props.onHeightChange(line.linenum, curHeight, snapshot.height);
         }
@@ -479,7 +483,7 @@ class LineCmd extends React.Component<{sw : ScreenWindow, line : LineType, width
                         <div className="term-block" onClick={this.clickTermBlock}></div>
                     </If>
                     <div className="terminal-connectelem" id={"term-" + getLineId(line)} data-cmdid={line.cmdid} style={{height: termHeight}}></div>
-                    <If condition={!termLoaded}><div style={{position: "absolute", top: 60, left: 30}}>(loading)</div></If>
+                    <If condition={!termLoaded}><div className="terminal-loading-message">(loading)</div></If>
                 </div>
                 <If condition={cmd.getRtnState()}>
                     <div className="cmd-rtnstate" style={{visibility: ((cmd.getStatus() == "done") ? "visible" : "hidden")}}>
@@ -503,6 +507,9 @@ class LineCmd extends React.Component<{sw : ScreenWindow, line : LineType, width
 class Line extends React.Component<{sw : ScreenWindow, line : LineType, width : number, staticRender : boolean, visible : OV<boolean>, onHeightChange : HeightChangeCallbackType}, {}> {
     render() {
         let line = this.props.line;
+        if (line.hidden) {
+            return null;
+        }
         if (line.linetype == "text") {
             return <LineText {...this.props}/>;
         }
@@ -2449,7 +2456,7 @@ class MainSideBar extends React.Component<{}, {}> {
                     </p>
                     <ul className="menu-list">
                         <If condition={!model.sessionListLoaded.get()}>
-                            <li><a>(loading)</a></li>
+                            <li className="menu-loading-message"><a>(loading)</a></li>
                         </If>
                         <If condition={model.sessionListLoaded.get()}>
                             <For each="session" index="idx" of={model.sessionList}>

src/sh2.less

@@ -94,6 +94,7 @@ html, body, #main {
                 padding: 10px;
                 height: 100%;
                 color: #ccc;
+                .mono-font();
 
                 code {
                     background-color: black;
@@ -240,6 +241,10 @@ html, body, #main {
         li {
             .mono-font();
         }
+
+        li.menu-loading-message {
+            .mono-font();
+        }
     }
 
     .menu-list.remotes-menu-list {
@@ -456,6 +461,13 @@ html, body, #main {
         &.cmd-done .terminal .xterm-cursor {
             display: none;
         }
+
+        .terminal-loading-message {
+            position: absolute;
+            top: 60px;
+            left: 30px;
+            .mono-font();
+        }
     }
 
     .cmd-rtnstate {

src/types.ts

@@ -25,9 +25,10 @@ type LineType = {
     linelocal : boolean,
     linetype : string,
     text : string,
-    cmdid : string,
-    contentheight : number,
-    star : number,
+    cmdid? : string,
+    contentheight? : number,
+    star? : number,
+    hidden? : boolean,
     ephemeral? : boolean,
     remove? : boolean,
 };