Loading skeleton for GitLab charts
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.
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.
Related links
- Existing skeleton loader component
- Related gitlab-ui issue
- #365 (comment 198081860)
- gitlab-org&2904 (comment 320396838)
Checklist
Make sure the following are completed before closing the issue:
-
Assignee: Create component in your own draft file in Figma using the component template, including all variations and states. -
Assignee: Update the link to the Figma file in the issue description. -
Assignee: Ask a FE/UX Foundations designer to review your component (ensure they have edit permissions in Figma). -
Reviewer: Review and approve assignee’s addition. Ensure that component includes all variations/states and, if applicable, matches existing Sketch specs and is responsive. -
Reviewer: Assign to a Figma maintainer for final review (make sure they have edit permissions in Figma). -
Maintainer: Review and approve assignee’s addition. -
Maintainer: Add the component to the Pajamas UI Kit file, and view the component in the Assets panel to ensure it aligns with what’s outlined in the document and asset library structure documentation. -
Maintainer: Publish the library changes along with a clear commit message. -
Assignee: Move the draft file to the Component archive Figma project. If you're a community contributor, we ask that you transfer ownership of your draft file to the maintainer so they can move it to our archive, along with its version history and comments. -
Assignee (or Maintainer, for community contributions): If it's a new pattern or a significant change, add an agenda item to the next UX weekly call to inform everyone. -
Assignee: Create a merge request in this repository with the component-guideline template to create or update the component's documentation page. Link it here as a related merge request. Use View design in Pajamas UI Kit →
for the link text. This replaces any link to Sketch Measure specs. Anyone with the link should be able to view the file. -
Assignee: Once the merge request is created, close this issue.