Display a compiling indicator in browser

[egoist]

Feature request

What problem does this feature solve?

Rebuilding can be slow, it's frustrating when you edit something but the page doesn't update right away, we can provide a better experience by adding an indicator to show the build progress.

In Next.js:

In Nuxt.js:

What does the proposed API look like?

This should be on by default, but you should be able to turn it off by build: { browserIndicator: false } or CLI flag --no-browser-indicator

How should this be implemented in your opinion?

Hook into webpack compiler and send progress info to browser via webpack-hot-middleware.

---

IssueHunt Summary

Backers (Total: $40.00)

• issuehunt ($40.00)

Become a backer now!

Or submit a pull request to get the deposits!

Tips

• Checkout the Issuehunt explorer to discover more funded issues.
• Need some help from other developers? Add your repositories on IssueHunt to raise funds.

---

IssueHunt has been backed by the following sponsors. Become a sponsor

[nblthree]

No need to send progress data if we do it in Next.js style the following code will do the job

mounted () {
    this.isVisible = false
    this.isBuilding = false
    this.timeoutId = null
    this.sse = new window.EventSource('/__webpack_hmr')
    this.sse.addEventListener('message', event => this.onSseMessage(event))
  },
  methods: {
    onSseMessage (event) {
      // This is the heartbeat event
      if (event.data === '\uD83D\uDC93') {
        return
      }

      try {
        const obj = JSON.parse(event.data)
        switch (obj.action) {
          case 'building':
            this.timeoutId && clearTimeout(this.timeoutId)
            this.isVisible = true
            this.isBuilding = true
            break
          case 'built':
            this.isBuilding = false
            // Wait for the fade out transtion to complete
            this.timeoutId = setTimeout(() => {
              this.isVisible = false
            }, 100)
            break
        }
      } catch {}
    }
  }

What do you say @egoist should I do it in this way?

[issuehunt-oss]

@issuehunt has funded $40.00 to this issue.

---

• Submit pull request via IssueHunt to receive this reward.
• Want to contribute? Chip in to this issue via IssueHunt.
• Checkout the IssueHunt Issue Explorer to see more funded issues.
• Need help from developers? Add your repository on IssueHunt to raise funds.

[egoist]

@MarchWorks you can handle the events here: https://github.com/saberland/saber/blob/master/packages/saber/vue-renderer/app/dev-client.js

[nblthree]

@egoist got it but if I do that how I am supposed to pass the isBuilding variable to the component? or should I use a pure js solution document.createElement ...........?

[egoist]

@MarchWorks It's a simple component so document.createElement is probably enough for this.

[nblthree]

I decided to use a "command seal" I will use this one

[nblthree]

still needs some tweaks https://jsfiddle.net/3h8vayjs/2/

[egoist]

Interesting, is there an animated version? 😄

[nblthree]

Not yet but I am thinking of animating it like when a "command" is used