Because the impact module is rendered on the client side we need to have a skeleton or loading state to display before the JavaScript can execute.
| Current (no loading state) | Proposed skeleton design
|--|--
| {F35629724} | {F35685981}
* Design details:
** Add skeleton loading behaviour in keeping with the same visual style and animation as the skeleton implemented in the Suggested edits cards (see T263040).
** Module height should be the same as final height once content is loaded.
** Elements that should be available/appear on load (no progess loader required):
*** Scorecard background colour
*** Scorecard icons + labels
*** Section headings
*** Time period dropdown
*** “View all your edits” label (minus count)
** Elements that will show as an ellipsis until replaced with the value (as per T236842):
*** Scorecard values
*** Count of all edits
** Elements that will show as a block of Base80 colour “shimmering” while loading:
*** Recent activity value + bar chart
*** Views count with line chart
*** Top viewed articles thumbnails
** Elements that will show as a block of Base70 colour “shimmering” while loading:
*** Top viewed article titles + view counts
* Recent activity skeleton elements “shimmer” by changing opacity of Base80 background from 100% to 40%.
* Most viewed articles list - thumbnail “shimmers” by changing opacity of Base80 background from 100% to 40%. Similarly, article title and views count changes from Base70 at opacity 100% to 40%. There is a cascade effect via animation-delay in subsequent article rows
(see same effect on T263040)
See also the [[ https://www.figma.com/file/fOa1x7hw6EM9VnaMJv7vib/Positive-reinforcement?node-id=3123%3A108314 | Figma spec ]]
**Acceptance Criteria**
# I should see a skeleton or loading state that doesn't cause the module box to grow in size when the JavaScript executes.
# ....
#### Completion checklist
**Functionality**
[] The patches have been code reviewed and merged
[] The task passes its acceptance criteria
**Engineering**
[] There are existing and passing unit/integration tests
[] Tests for every involved patch should pass
[] Coverage for every involved project should have improved or stayed the same
**Design & QA**
[] If the task is UX/Design related: it must be reviewed and approved by the UX/Design team
[] Must be reviewed and approved by Quality Assurance.
**Documentation**
[] Related and updated documentation done where necessary
- Internal technical changes: internal repository documentation must be updated (README.md, JSDoc, PHPDoc)
- Infrastructure technical changes: technical changes that reflect on environment, infrastructure, endpoints or any other area of interest for technical contributors should be reflected on [[ https://www.mediawiki.org/wiki/Extension:GrowthExperiments | Extension:GrowthExperiments ]] or [[ https://www.mediawiki.org/wiki/Extension:GrowthExperiments/Technical_documentation | Extension:GrowthExperiments/Technical documentation ]] pages.