Add UI feedback

bin/watch/index.js

@@ -2,14 +2,17 @@
 
 const getTimestamp = require('time-stamp')
 const logSymbols = require('log-symbols')
-const debounce = require('debounce')
+const logUpdate = require('log-update')
 const { watch } = require('chokidar')
+const debounce = require('debounce')
 const chalk = require('chalk')
 
 const getWatchConfig = require('./get-watch-config')
 const destroySockets = require('./destroy-sockets')
 const restartServer = require('./restart-server')
+const ora = require('ora')
 
+const createSpinner = () => ora({ color: 'gray' })
 let firsTime = false
 
 const logRestart = ({ filename, forcing }) => {
@@ -18,7 +21,26 @@ const logRestart = ({ filename, forcing }) => {
   const timestamp = chalk.gray(getTimestamp('HH:mm:ss'))
   const header = chalk.blue(forcing ? 'restart' : 'modified')
   const message = chalk.gray(filename || '')
-  console.log(`${offset} ${symbol} ${timestamp} ${header} ${message}`)
+  const spinner = createSpinner()
+  const logMessage = `${offset} ${symbol} ${timestamp} ${header} ${message}`
+
+  let done = false
+
+  const timer = setInterval(() => {
+    done
+      ? logUpdate(`${logMessage}`)
+      : logUpdate(`${logMessage} ${spinner.frame()}`)
+  }, 50)
+
+  return {
+    stop: () => {
+      done = true
+      setTimeout(() => {
+        clearInterval(timer)
+        logUpdate.done()
+      }, 50)
+    }
+  }
 }
 
 const doRestart = ({
@@ -31,10 +53,10 @@ const doRestart = ({
   cli,
   watcher
 }) => {
-  logRestart({ filename, forcing })
+  const spinner = logRestart({ filename, forcing })
   destroySockets(sockets)
   server.close(
-    restartServer.bind(this, { ignored, filename, pkg, cli, watcher })
+    restartServer.bind(this, { spinner, ignored, filename, pkg, cli, watcher })
   )
 }
 

bin/watch/restart-server.js

@@ -4,7 +4,7 @@ const clearModule = require('clear-module')
 const anymatch = require('anymatch')
 const path = require('path')
 
-module.exports = ({ filename, pkg, cli, watcher, ignored }) => {
+module.exports = ({ spinner, filename, pkg, cli, watcher, ignored }) => {
   const watched = watcher.getWatched()
   let toDelete = []
 
@@ -42,4 +42,5 @@ module.exports = ({ filename, pkg, cli, watcher, ignored }) => {
 
   // Restart the server
   require('../serve')({ filename, pkg, cli, restarting: true })
+  spinner.stop()
 }

package.json

@@ -49,7 +49,9 @@
     "ip": "~1.1.5",
     "json-future": "~2.1.2",
     "log-symbols": "~2.0.0",
+    "log-update": "~2.1.0",
     "meow": "~3.7.0",
+    "ora": "~1.3.0",
     "time-stamp": "~2.0.0",
     "update-notifier": "~2.2.0"
   },