question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

HMR loading indicator

See original GitHub issue

What problem does this feature solve?

Unless I’m monitoring the terminal, I often find myself wondering wether my latest changes have gone to the browser yet. Since you’re now showing error messages in the browser view, I think it’d be nice to take the opportunity to also add an indicator which shows you when the HMR process is done.

What does the proposed API look like?

I see two alternatives:

If it’s possible to send a message to the browser before compilation starts, you could display a “Reloading module…” message, which disappears when the process is done.

If the browser only recieves notice after compilation is done, you could display a “Module reloaded” message, which immediately starts fading away. I’ve already made a component like this myself actually, using the module.hot.addStatusHander hook.

Issue Analytics

  • State:open
  • Created 6 years ago
  • Reactions:2
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

3reactions
dhenschecommented, May 2, 2018

I’m not a webpack guru by any means, but when perusing the DevServer documentation I figured out that you can go to http://localhost:8080/webpack-dev-server/ which has a little hot loader bar at the top that shows the HMR status

0reactions
Hertebycommented, Jul 5, 2018

@LinusBorg I might try that out 🙂 Hmm, do you have any pointers on how to get a cli plugin to inject code into the client? Most existing plugins just add files and webpack configs.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Hot Module Replacement - webpack
Hot Module Replacement (or HMR) is one of the most useful features offered by ... Hot loading stylesheets can be done by importing...
Read more >
How to configure Hot Module Replacement (HMR) with ...
This command will start the WDS server, build your assets and wait for connections from the browser. Now when you visit your website,...
Read more >
webpack-dev-server with hot reload reloading entire page ...
I have hot reloading without any problems, but it reloads the entire page whenever I make a single css change. I would like...
Read more >
mok-loading-indicator - CodeSandbox
mok-loading-indicator. 0. Embed Fork Create Sandbox Sign in. Sandbox Info. mok-loading-indicator. 0. 170. 0. jvila_llUI Component System.
Read more >
Loading Plugin - Quasar Framework
A Quasar plugin which can display a loading state for your app through an overlay with a spinner and a message.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found