Loading skeleton for GitLab charts
Problem
Currently, we don't have a specific loading state for charts in GitLab. Different stages deal with this in different ways, from using spinners of varying sizes to using empty states as loading states. Neither of those are optimal, and different solutions lead to inconsistency within the UI.
Metrics charts loading states | Analytics loading states | Cluster health charts loading state |
---|---|---|
There's an opportunity to improve the perceived performance and the overall user experience of our charts and dashboards by introducing a chart loading state that will work across different parts of the product.
Solution
A loading skeleton would do a better job conveying the loading state of a chart, compared to a spinner or a static empty state. It hints at what type of content is loading, thus reducing the uncertainty the user feels when loading takes long.
Example(s)
Usage
Dos and dont's
|
|
---|---|
Related patterns
Existing skeleton loader component
Links / references
Related gitlab-ui issue Related discussions:
Checklist
Make sure these are completed before closing the issue, with a link to the relevant commit or issue, if applicable. Get familiar with the Sketch UI Kit documentation which has information on updating files, structure, fonts, and symbols.
-
Author: Create a Sketch file in your progress folder with the changes required for this issue. Try to use existing symbols, layer styles, and text styles. -
Author: Ask another Product Designer to review your personal Sketch file, linking them to your latest commit so they know where to find it. If they have the capacity, they should assign themselves to this issue. If not, try pinging another person. -
Reviewer: Review and approve author's changes in their personal Sketch file, according to the workflow. -
Author: Add your changes to the GitLab Sketch UI Kit (pattern library and/or instance sheet), following this step-by-step process. -
Author: Ask the reviewer to review your changes to the Sketch UI Kit files. -
Reviewer: Review and approve author's changes to the Sketch UI Kit files, according to the workflow. -
Author: Create an issue in the Design System to update the design specs and documentation. Mark it as related to this issue. -
Author: Add a read only (FYI) agenda item to the next UX weekly call to inform everyone of these changes, linking to this issue.