Display a compiling indicator in browser #442

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 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.

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

@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 ...........?

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

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

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

Interesting, is there an animated version? 😄

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