Follow-up: Add loading state to customizable dashboards
The following discussion from !98613 (merged) should be addressed:
-
@rob.hunt started a discussion: (+10 comments)
This recording highlights the eventual need for a loading state (recorded using the “slow 3G” network preset):
Screen_Recording_2022-10-18_at_13.42.29
A strong suggestion to make use of GlDashboardSkeleton
however we will probably need to move over the animation to the GitLab UI component as right now it's entirely static without that custom CSS:
.dashboard-card-skeleton-info {
border-radius: $gl-padding;
height: $gl-padding;
overflow: hidden;
&::after {
content: ' ';
display: block;
animation: blockTextShine 1s linear infinite forwards;
background-repeat: no-repeat;
background-size: cover;
background-image: linear-gradient(to right,
var(--gray-50, $gray-50) 0%,
var(--gray-10, $gray-10) 20%,
var(--gray-50, $gray-50) 40%,
var(--gray-50, $gray-50) 100%);
border-radius: $gl-padding;
height: $gl-padding;
margin-top: -$gl-padding-8;
}
}