Image component: add support for placeholders

Frontity Roadmap :biking_man:

Feature Card


For slow connections or heavy images it is possible that, until that image is fully downloaded, a blank space appears in the screen for a long time without the visitors having any clue why that space is empty, or what will appear there.

User stories

As a theme developer
I want to add placeholders for images
so that I can show where an image will be while it’s being downloaded.

As a visitor (Frontity user)
I want to see placeholders if an image hasn’t loaded yet
so that I can know where an image will be instead of see an empty space.

Possible solution

This could be implemented using a prop for the <Image> component, like placeholder or something like that. That prop would receive a component that would be rendered if the image is not ready yet.

Maybe the Image component could have a default placeholder (something like a grey background with image icon in the middle) in case a placeholder prop is not passed to the component.