## 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()`](https://github.com/ReactTraining/react-router/blob/master/docs/API.md#router-1) 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.