Background
We want to introduce loading indicator UI
User story
As a user with a slow connection, I want to know when the feature is loading
Requirements
Introduce loading indicator UI in the following places:
- Detail View component – when the Detail View component is loaded a large image size is requested from the server, which may take a few seconds to load.
Design
Detail View component
color should be computed average color
No Not Required items.
BDD
Feature: Loading state UI in image detail view
Scenario: Large image load in detail view
Given I open the detail view for an image
When the large image is requested from the server
Then a loading indicator is displayed with a background color based on the average color of the image
And the indicator disappears when the image finishes loadingTest Steps
Test Case 1: Loading indicator for large image in detail view
- Open an image in the detail view with a throttled/slow connection (e.g., simulate in DevTools).
- AC1: A loading indicator is shown while the large image request is in progress.
- AC2: The background color of the loading state is based on the computed average color of the image.
- AC3: The loading indicator disappears once the image is fully loaded.
QA Results - Patchdemo
| AC | Status | Details |
|---|---|---|
| 1 | ✅ | https://phabricator.wikimedia.org/T402973#11208719 |
| 2 | ✅ | https://phabricator.wikimedia.org/T402973#11208719 |
| 3 | ✅ | https://phabricator.wikimedia.org/T402973#11208719 |
Acceptance criteria
- Build out loading indicators according to the designs above
Notes
- Carousel broken out to T405382 due to needing server-side HTML/CSS output.
- We may be able to leverage Vue's Suspense component (async setup and fallback slots) to streamline how we handle loading state UIs.
- Loading state for other wiki projects moved to T402966: Image Browsing: Create the UI for "images from other wikis"
