imrpove progress

lib/builder/webpack/plugins/progress.js

@@ -31,39 +31,53 @@ module.exports = class ProgressPlugin extends webpack.ProgressPlugin {
     const progress = Math.floor(percent * 100)
 
     this.state.progress = progress
-    this.state.succeed =
     this.state.msg = msg
 
-    // Update spinner using shared state
-    let isInProgress = false
-    const width = 25
-    let line = _.range(width).fill(chalk.white(BLOCK_CHAR))
-    let additional = []
+    // Process all states
+    let inProgress = false
 
-    Object.keys(sharedState).forEach(name => {
+    const additional = []
+
+    const bars = Object.keys(sharedState).map(name => {
       const state = sharedState[name]
 
-      if (state.progress >= 100) {
+      if (state.progress < 100) {
+        inProgress = true
+      }
+
+      const blockChar = chalk.keyword(state.color)(BLOCK_CHAR)
+
+      additional.push(`${blockChar} ${name}(${state.progress}%) `)
+
+      return {
+        name,
+        color: state.color,
+        progress: state.progress,
+        blockChar: chalk.keyword(state.color)(BLOCK_CHAR)
+      }
+    })
+
+    if (!inProgress) {
+      this.spinner.succeed('Compiled ' + this.options.name)
       return
     }
 
-      isInProgress = true
+    // Generate progressbars
 
-      const w = state.progress * (width / 100)
-      const b = chalk.keyword(state.color)(BLOCK_CHAR)
+    const width = 25
+    const progressbars = _.range(width).fill(chalk.white(BLOCK_CHAR))
+
+    _.sortBy(bars, 'progress').reverse().forEach(bar => {
+      const w = bar.progress * (width / 100)
 
       for (let i = 0; i < w; i++) {
-        line[i] = b
+        progressbars[i] = bar.blockChar
       }
-
-      additional.push(`${b} ${name} (${state.progress}%) `)
     })
 
-    if (isInProgress) {
+    // Update spinner
+
     this.spinner.start()
-      this.spinner.text = 'Compiling ' + line.join('') + '   ' + additional.join('   ')
-    } else {
-      this.spinner.succeed('Compiled ' + this.options.name)
-    }
+    this.spinner.text = 'Compiling ' + progressbars.join('') + '   ' + additional.join('   ')
   }
 }