Passing props to loading component for next/dynamic

[phil-the-dev]

Goals

1. Passing the original props to the component to the loading component

Non-Goals

No response

Background

With CLS being a major component of a good site, a lot of props that I use are arrays that are used to map through. It would be really nice if the props could be forwarded to the loading component so we can create a good experience for users.

For example, when loading this page I have, I know how many filters there are, but since I can't pass that array into the loader, I'm stuck with a very generic static loading state:

const DynamicFilters = dynamic(
  () => import("../../DynamicFilters/DynamicFilters"),
  {
    loading: () => <div className="p-lg">Loading filters...</div>,
    ssr: false,
  },
);

const Page = ({ filters}) => {
	//...
	
	return (
		<>
			<h1>Results</h1>
			<DynamicFilters filters={filters} />
			<!-- other content -->
		</>
	);
};

Proposal

It'd be nice to have access to the original props since they are already being passed.

const DynamicFilters = dynamic(
  () => import("../../DynamicFilters/DynamicFilters"),
  {
    loading: ({filters) => <div>{filters.map((filter) => (<FilterLoadingSkeleton />))}</div>,
    ssr: false,
  },
);