Frontend: Artifacts: Improve table loading state
Summary
The artifacts table is replaced with a small loading spinner whenever the query that gets its data is loading, which is okay for page loading, but when #415927 (closed) is implemented and we refetch the job list to clear out the empty jobs and fill the page back up to 20 jobs, it will be more jarring:
Screen_Recording_2023-07-26_at_13.50.43
Why this matters and how we measure
User Stories
Proposal
Replace the loading spinner with one of these options?:
-
🅰 remove the<template #table-busy>
and let the table use its default busy state (slightly transparent): -
🅱 replace the loading spinner with a skeleton loader that matches the contents of the table:
skeleton loader draft
<template #table-busy>
<gl-skeleton-loader v-for="i in 20" :key="i" :width="1000" :height="80">
<rect width="230" height="30" x="20" y="5" rx="4" />
<rect width="330" height="40" x="300" y="5" rx="4" />
<rect width="80" height="30" x="670" y="5" rx="4" />
<rect width="80" height="30" x="770" y="5" rx="4" />
<rect width="120" height="40" x="880" y="5" rx="4" />
</gl-skeleton-loader>
</template>
Performance Considerations
Out of Scope
Acceptance Criteria
Additional details
Some relevant technical details, if applicable, such as:
- Does this need a feature flag?
- Does there need to be an associated instrumentation issue created related to this work?
- Is there an example response showing the data structure that should be returned (new endpoints only)?
- What permissions should be used?
- Which tier(s) is this for?
- Additional comments:
Implementation Table
Group | Issue Link |
---|---|
frontend |
|
Links/References
This page may contain information related to upcoming products, features and functionality. It is important to note that the information presented is for informational purposes only, so please do not rely on the information for purchasing or planning purposes. Just like with all projects, the items mentioned on the page are subject to change or delay, and the development, release, and timing of any products, features, or functionality remain at the sole discretion of GitLab Inc.