fix #170 add ssh loading indicator

src/client/components/terminal/index.jsx

@@ -3,6 +3,8 @@ import React from 'react'
 import fetch from '../../common/fetch'
 import {generate} from 'shortid'
 import _ from 'lodash'
+import {Spin} from 'antd'
+import './terminal.styl'
 
 const {Terminal, getGlobal} = window
 let config = getGlobal('_config')
@@ -11,7 +13,8 @@ export default class Term extends React.Component {
   constructor(props) {
     super()
     this.state = {
-      id: props.id || generate()
+      id: props.id || generate(),
+      loading: false
     }
   }
 
@@ -51,6 +54,9 @@ export default class Term extends React.Component {
   count = 0
 
   remoteInit = async (term) => {
+    this.setState({
+      loading: true
+    })
     let {cols, rows} = term
     let {host, port} = config
     let wsUrl
@@ -63,6 +69,9 @@ export default class Term extends React.Component {
       ...tab,
       type: tab.host ? 'remote' : 'local'
     })
+    this.setState({
+      loading: false
+    })
     if (!pid) return
 
     term.pid = pid
@@ -105,10 +114,12 @@ export default class Term extends React.Component {
   }
 
   render() {
-    let {id} = this.state
+    let {id, loading} = this.state
     let {height} = this.props
     return (
-      <div id={id} style={{height}} className="bg-black" />
+      <Spin spinning={loading} wrapperClassName="loading-wrapper">
+        <div id={id} style={{height}} className="bg-black" />
+      </Spin>
     )
   }
 

src/client/components/terminal/terminal.styl

@@ -0,0 +1,5 @@
+.loading-wrapper
+  .ant-spin
+    color #fff
+  .ant-spin-blur
+    opacity 0