How can I listen to event for page change?

Get Help and Help Others
1

When I switch pages, the UI freezes for few seconds before my page loads, this is definitely due to code-splitting. I couldn’t find a way to listen for event for like if the page is loaded or not, I want to show a spinner in the layout.

2

Have a look at Router | RedwoodJS Docs as it might help with the flash.

Code-splitting

By default, the router will code-split on every Page, creating a separate lazy-loaded bundle for each. When navigating from page to page, the router will wait until the new Page module is loaded before re-rendering, thus preventing the “white-flash” effect.

Not code splitting

If you’d like to override the default lazy-loading behavior and include certain Pages in the main bundle, you can simply add the import statement to the Routes.js file:

Routes.js

import HomePage from 'src/pages/HomePage'

Redwood will detect your explicit import and refrain from splitting that page into a separate bundle. Be careful with this feature, as you can easily bloat the size of your main bundle to the point where your initial page load time becomes unacceptable.

Also: there is a way to check loading described following that section:

In order to show a loader as your page chunks are loading, you simply add the whileLoadingPage prop to your route, Set or Private component.

1 Like
3

I couldn’t find a way to listen for event for like if the page is loaded or not, I want to show a spinner in the layout.

is this what you were looking for? Redwood Router docs | While page chunks load

1 Like
4

yes, exactly, thanks!

1 Like