React-starter-kit: add lazy loading and progress bar

[gauravprwl14]

hey, i want to add lazy loading and progress bar at the top the page whenever a page is loaded.
i tried nprogress library but it always generate "document not define " error.

can you suggest some library which can be used to in this boilerplate to show loading indicator when a page is loaded

[frenzzy]

See lazy load (code splitting) example inside admin route: src/routes/admin/index.js, ref #901

To indicate page loading process just add any spinner (loader) component to your html and show it at line 128 and hide at line 150.

[langpavel]

For redux use react-redux-loading-bar.

In case of mounting after server rendering just dispatch showLoading on server before rendering and then dispatch hideLoading on client (after your initial render finish) — See usage without middleware

[gauravprwl14]

it is working. Thanks for the help

[Shadowman4205]

@langpavel I tried this suggested loading bar. But i get error

Invariant Violation: Could not find "store" in either the context or props of "Connect(LoadingBar)". Either wrap the root component in a , or explicitly pass "store" as a prop to "Connect(LoadingBar)".

when i put it on Html component? when i put on another component itis working well. Why this happen?

[langpavel]

@Shadowman4205 Html component is rendered statically and it works as a stupid template and it cannot be refreshed on client. There are good reasons for doing this this way.

You must use redux for this component and you must have redux injected, this is done in App component on redux, apollo and react-intl feature branches.

You then can use react-redux-loading-bar only in components nested under App component which is real React root for entire application.