Skip to content

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?:

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 👈 You are here

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.

Edited by 🤖 GitLab Bot 🤖