Skip to content

Latest commit

 

History

History
17 lines (12 loc) · 1.16 KB

progressbar.md

File metadata and controls

17 lines (12 loc) · 1.16 KB
Raw

Progress Bar

Route transitions are not smooth over the network because chunks generated by webpack take some time to load. It would cause a poor user experience especially for those with slow internet connections. To tackle this UX issue, react-boilerplate's example app comes with a progress bar which shows fake progress while browser downloads the chunk and renders it.

How it works

The ProgressBar percentage depends on the listenBefore() hook that comes with react-router. A Route change will be caught by React's component life cycle methods.

  • Initially, the percentage is -1. The progress bar is hidden.
  • Progress is set to 0 when the location changes and it keeps on increasing until the new route is mounted or it reaches 99 (whichever happens first).
  • Percentage is set to 100 when the new route mounts.
  • Percentage is reset to -1 and ProgressBar is ready for a new route change.

Default behaviour

  • <ProgressBar /> will not show progress for previously loaded routes.

Limitations

  • It will not show progress before main.js is loaded in the DOM.