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.
Have a look at Router | RedwoodJS Docs as it might help with the flash.
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.
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
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
whileLoadingPageprop to your route,
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
yes, exactly, thanks!