@@ -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 (
+
+ );
+ }
+}
+
@mobxReact.observer
class Main extends React.Component<{}, {}> {
constructor(props : any) {
diff --git a/src/model.ts b/src/model.ts
index e43c1dfc..7842d9d1 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 00dbc1d7..2dcdcdd3 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 232fe72f..d38db995 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,