Ability to use a Component as a Placeholder for next/image?

[rlaphoenix]

I know one can just do something like if (src) return <Image .../> else return <Placeholder />, but what if you didn't want to repeat information like the height, width, container, the classes being sent to the Image via className prop, etc.? What if you too wanted to do e.g. all the layout fill and object-fit props? It's annoying to repeat itself.

And for that matter, what about the ability to control loading based on readiness/dependencies?

Right now, for that, I'm using a hacky workaround. It requires both a loader and an src. So let's deal with that: <Image src="#" loader={() => {}} placeholder="blur" blurDataURL{...}.../>. This method never finishes loading, so it always uses the blurDataURL. Right here would be amazing for support for using placeholder="component" then componentPlaceholder={<span class="bg-gray-500 w-full h-full" />} or similar.