Background

• Currently, when users open their Saved items page, a progress loading bar appears while the content loads. While the progress bar does communicate that something is happening, it feels inappropriate for loading content.
• In the codex guidelines, progress bars are best used for providing real-time feedback on the progress of ongoing operations, such as file uploads or form submissions.
• For loading content, there is a codex task filed to create a skeleton loader. This type of loader is more appropriate to load users saved items.
• Skeleton loading also helps reduced perceived waiting time and aligns with modern design patterns used online.
• We use skeleton loading on media search (https://commons.wikimedia.org/w/index.php?search=&title=Special%3AMediaSearch&type=image) on wikimedia commons.

User Story

As a user, when viewing my saved content, I want a loading experience to feel natural and coherent with how content appears on the page.
As a designer and developer, I want to be able to reuse a skeleton animation to visually indicate to users that UI content is loading.

Requirements

• Add skeleton loading to codex
• Replace the current progress bar with a skeleton loading state for saved items
• Skeletons should match the structure of actual content