How should we handle skeleton screens? #24
Description
Describe the bug
A skeleton screen is used as a placeholder while users wait for a page to load. This progress indicator is used for full page loads and reduces the perception of a long loading time by providing clues for how the page will ultimately look.
https://www.nngroup.com/articles/skeleton-screens/
These are more useful to the user because they show a "shadow" of the website layout before content has come in. However, because the grey areas are usually in the same position of actual content we may not get a PerformanceContainerTiming event when content does eventually come through.
There may not be anything we can do about this and that's how it is, but this is a good time to discuss it whilst changes can be made.
LCP already ignores low-entroy images so we should be leveraging the same heuristics that LCP use. If that is the case we are fine.
We would need the same spec text written here for LCP:
To Reproduce
- Clone the repo
npm i; npm run start- Navigate to the skeleton-layout example
- Open devtools and observe the entry being recorded