[Feature] Better image loading #155
Description
Motivation behind the feature and what it will do
When you enter a page that has images sometimes the container for the image will load before the image does, resulting in an empty box or background before the image has been fetched. For example, sometimes the background of the README page take a while to load and will slowly
This feature will make it so any component that requires an image to be fetched will either show a skeleton, loading symbol or animate in when ready. This will be assessed on a case-by-case basis.
Which part of the application will this feature be for?
The component library and the main site.
Minimal Viable Product
- Skeleton components for
CardComponent, which indicate something is loading - Waiting until all images are loaded on pages before displaying the content, with some indication stuff is loading
- Display something if an image fails to load
Code changes
Could be as small as adding some defers, but to ensure everything acts the same across similar components we could make components that have this behaviour baked in.
Additional context
- Defer blocks in Angular