Update shape of skeleton loader on Releases and Release pages
Release notes
Update skeleton loader component on Releases.
Problem to solve
The shape of the loader indicator on the Releases and the Release pages look nothing like the final content of the page. These types of loading indicators should at least abstractly match the shape of the page's content, and follow the existing Pajamas guidelines.
Intended users
- Anyone accessing and consuming Releases, including
- Devon (DevOps Engineer)
- Rachel (Release Manager)
User experience goal
The user should be able to see a loading state that always represent Releases in a recognizable way.
Proposal
SEE PAJAMAS ISSUE WITH PROPOSAL
- The component variation should be called:
release-card-skeleton-basic
- frontend the component should be added back to gitlab-ui
- The skeleton loader should be responsive, and adjust to the width of the container/browser.
- Developers can then recreate those by using the
<gl-skeleton-loader>
component. Primitives should follow Pajamas geometric progression and examples are available inside the pattern library. - The
<gl-skeleton-loader>
component from@gitlab/ui
, which is based onvue-content-loader
, allows the shape of the indicator to be customized. - Skeleton loaders use a pulsing wave effect motion to indicate they are loading. The animation transitions color horizontally from left to right, starting with
$gray-200
to$gray-100
. - Use rounded corners, even for rectangular shapes. Shapes follow our standard spacing guidelines.
Further details
We currently use the <skeleton-loading>
component from @gitlab/ui
.
Current loading state
Permissions and Security
-
Add expected impact to members with no access (0) -
Add expected impact to Guest (10) members -
Add expected impact to Reporter (20) members -
Add expected impact to Developer (30) members -
Add expected impact to Maintainer (40) members -
Add expected impact to Owner (50) members
Documentation
- No documentation updates are required for GitLab.
- We might need to update the gitlab-ui docs.
Availability & Testing
- Unit test changes
- Integration test changes
- End-to-end test change
What does success look like, and how can we measure that?
This feature will improve the usability of releases &2355
What is the type of buyer?
Is this a cross-stage feature?
No
Links / references
Here's a UI that can be used when developing these shapes: http://danilowoz.com/create-vue-content-loader/
Edited by Rayana Verissimo