Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Display a compiling indicator in browser #442

Open
egoist opened this issue Sep 11, 2019 · 9 comments · May be fixed by #503
Open

Display a compiling indicator in browser #442

egoist opened this issue Sep 11, 2019 · 9 comments · May be fixed by #503

Comments

@egoist
Copy link
Collaborator

@egoist egoist commented Sep 11, 2019

Issuehunt badges

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:

next.js

In Nuxt.js:

nuxt

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)

Become a backer now!

Or submit a pull request to get the deposits!

Tips


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

@MarchWorks

This comment has been minimized.

Copy link
Member

@MarchWorks MarchWorks commented Sep 18, 2019

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

This comment has been minimized.

Copy link

@issuehunt-app issuehunt-app bot commented Sep 19, 2019

@issuehunt has funded $40.00 to this issue.


@egoist

This comment has been minimized.

Copy link
Collaborator Author

@egoist egoist commented Sep 19, 2019

@MarchWorks

This comment has been minimized.

Copy link
Member

@MarchWorks MarchWorks commented Sep 19, 2019

@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

This comment has been minimized.

Copy link
Collaborator Author

@egoist egoist commented Sep 19, 2019

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

@MarchWorks

This comment has been minimized.

Copy link
Member

@MarchWorks MarchWorks commented Oct 4, 2019

I decided to use a "command seal" I will use this one
gilgamesh-command-spell

@MarchWorks

This comment has been minimized.

Copy link
Member

@MarchWorks MarchWorks commented Oct 4, 2019

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

@egoist

This comment has been minimized.

Copy link
Collaborator Author

@egoist egoist commented Oct 4, 2019

Interesting, is there an animated version? 😄

@MarchWorks

This comment has been minimized.

Copy link
Member

@MarchWorks MarchWorks commented Oct 4, 2019

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

@MarchWorks MarchWorks linked a pull request that will close this issue Oct 4, 2019
3 of 10 tasks complete
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
2 participants
You can’t perform that action at this time.