Page-specific loader components

[alexparish]

I am using getServerSideProps to SSR the initial page. Subsequent pages are client-side rendered with props provided by getServerSideProps.

I had hoped to be able to define page-specific loader components so I could layout skeleton loaders to roughly match page contents, but it doesn't seem there's a straightforward way of defining these for a page.

My first attempt was to follow the approach outlined in the following StackOverflow question:

// Page component
Page.Loader = SomeLoaderComponent

// _app.jsx
const Loader = Component.Loader || DefaultLoader;

https://stackoverflow.com/questions/68375270/individual-loading-animation-for-each-page-with-next-js

Is this something that could be supported natively by Next?

As a hack, I have been using the following approach in _app.jsx:

const handleRouteChangeStart = (url) => {
    // get page-specific loader component based on url being requested
    // and re-render app component to show the loader until page is loaded
}

router.events.on('routeChangeStart', handleRouteChangeStart)