Fix strange behavior with loading screens showing when they should not etc

js/term/connection.js

@@ -19,12 +19,18 @@ module.exports = class TermConnection extends EventEmitter {
 
     this.pageShown = false
 
+    this.disconnectTimeout = null
+
     document.addEventListener('visibilitychange', () => {
       if (document.hidden === true) {
         console.info('Window lost focus, freeing socket')
-        this.closeSocket()
-        clearTimeout(this.heartbeatTimeout)
+        // Delayed, avoid disconnecting if the background time is short
+        this.disconnectTimeout = setTimeout(() => {
+          this.closeSocket()
+          clearTimeout(this.heartbeatTimeout)
+        }, 1000)
       } else {
+        clearTimeout(this.disconnectTimeout)
         console.info('Window got focus, re-connecting')
         this.init()
       }
@@ -80,7 +86,6 @@ module.exports = class TermConnection extends EventEmitter {
           break
 
         default:
-          this.emit('load')
           this.screen.load(evt.data)
           if (!this.pageShown) {
             window.showPage()
@@ -118,7 +123,7 @@ module.exports = class TermConnection extends EventEmitter {
       console.error('Socket not ready')
       return false
     }
-    if (typeof message != 'string') {
+    if (typeof message !== 'string') {
       message = JSON.stringify(message)
     }
     this.ws.send(message)
@@ -161,7 +166,7 @@ module.exports = class TermConnection extends EventEmitter {
 
   heartbeat () {
     clearTimeout(this.heartbeatTimeout)
-    this.heartbeatTimeout = setTimeout(() => this.onHeartbeatFail(), 2000)
+    this.heartbeatTimeout = setTimeout(() => this.onHeartbeatFail(), 2500)
   }
 
   onHeartbeatFail () {

js/term/index.js

@@ -14,33 +14,47 @@ module.exports = function (opts) {
   const input = TermInput(conn, screen)
   const termUpload = TermUpload(conn, input, screen)
   screen.input = input
+  screen.conn = conn
   input.termUpload = termUpload
 
-  // we delay the display of "connecting" to avoid flash when changing tabs with the terminal open
-  let showConnectingTimeout = -1
+  let showSplashTimeout = null
+  let showSplash = (obj, delay = 250) => {
+    clearTimeout(showSplashTimeout)
+    showSplashTimeout = setTimeout(() => {
+      screen.window.statusScreen = obj
+    }, delay)
+  }
+
   conn.on('open', () => {
-    showConnectingTimeout = setTimeout(() => {
-      screen.window.statusScreen = { title: 'Connecting', loading: true }
-    }, 250)
+    // console.log('*open')
+    showSplash({ title: 'Connecting', loading: true })
   })
   conn.on('connect', () => {
-    clearTimeout(showConnectingTimeout)
-    screen.window.statusScreen = { title: 'Waiting for content', loading: true }
+    // console.log('*connect')
+    showSplash({ title: 'Waiting for content', loading: true })
   })
   conn.on('load', () => {
+    // console.log('*load')
+    clearTimeout(showSplashTimeout)
     if (screen.window.statusScreen) screen.window.statusScreen = null
   })
   conn.on('disconnect', () => {
-    clearTimeout(showConnectingTimeout)
-    screen.window.statusScreen = { title: 'Disconnected' }
+    // console.log('*disconnect')
+    showSplash({ title: 'Disconnected' })
     screen.screen = []
     screen.screenFG = []
     screen.screenBG = []
     screen.screenAttrs = []
   })
-  conn.on('silence', () => { screen.window.statusScreen = { title: 'Waiting for server', loading: true } })
+  conn.on('silence', () => {
+    // console.log('*silence')
+    showSplash({ title: 'Waiting for server', loading: true }, 0)
+  })
   // conn.on('ping-fail', () => { screen.window.statusScreen = { title: 'Disconnected' } })
-  conn.on('ping-success', () => { screen.window.statusScreen = { title: 'Re-connecting', loading: true } })
+  conn.on('ping-success', () => {
+    // console.log('*ping-success')
+    showSplash({ title: 'Re-connecting', loading: true }, 0)
+  })
 
   conn.init()
   input.init(opts)

js/term/screen.js

@@ -30,6 +30,15 @@ module.exports = class TermScreen extends EventEmitter {
         return () => console.warn('TermScreen#input not set!')
       }
     })
+    // dummy. Handle for Conn
+    this.conn = new Proxy({}, {
+      get () {
+        return () => console.warn('TermScreen#conn not set!')
+      },
+      set (a, b) {
+        return () => console.warn('TermScreen#conn not set!')
+      }
+    })
 
     this.cursor = {
       x: 0,

js/term/screen_parser.js

@@ -199,7 +199,7 @@ module.exports = class ScreenParser {
     if (this.screen.window.debug) console.log(`Blinky cells: ${this.screen.blinkingCellCount}`)
 
     this.screen.renderer.scheduleDraw('load', 16)
-    this.screen.emit('load')
+    this.screen.conn.emit('load')
   }
 
   /**