Pass props to the placeholder component when using dynamic

[skolodyazhnyy]

Goals

1. Make it possible to render meaningful placeholder while component is loading

Non-Goals

No response

Background

When using dynamic it's possible to specify a "loading" component, one which will be rendered in place of actual component while it's being loaded. Unfortunately there is no way to access properties of the dynamic component in the "loading" component so it can make a better placeholder for the content being loaded.

For example,

import dynamic from 'next/dynamic'
 
const Snippet = dynamic(() => import('../components/snippet'), {
  loading: () => <div>Loading...</div>,
})
 
export default function Home() {
  return <Snippet code={...}  />
}

Here while Snippet is being loaded I would like to render a simplified version using basic <pre> component. Then when Snippet component is loaded, basic version will be replaced by a more complex one.

Proposal

Add property componentProps or props to the loading component, so developers can access dynamic component properties.

Following example above, the solution would look something like this:

import dynamic from 'next/dynamic'
 
const Snippet = dynamic(() => import('../components/snippet'), {
  loading: ({componentProps}) => <pre>{componentProps.code}</pre>,
})
 
export default function Home() {
  return <Snippet code={...}  />
}

I believe everything is available here
https://github.com/vercel/next.js/blob/canary/packages/next/src/shared/lib/loadable.shared-runtime.tsx#L143

[justinh00k]

This would be very handy and prevent the need to create a new dynamic component for every type of loader.

return React.createElement(opts.loading, {
          isLoading: state.loading,
          pastDelay: state.pastDelay,
          props,
          timedOut: state.timedOut,
          error: state.error,
          retry: subscription.retry,
        })`

[jwickens]

This would also be great to for example use a regular div while framer motion is loading.