Skeleton loading of pipeline dashboard should be more recognisable

Problem to solve

Skeleton loading component and animations are not yet ready to handle more complex skeleton loaders. The pipeline dashboard is on of such cases that will be released with a simplified skeleton loader.

Target audience

Further details

Coming from https://gitlab.com/gitlab-org/gitlab-ee/merge_requests/9197/#note_148019141

Skeleton loader needs a multi-color animation for these to be recognizable and be 1:1 with the delivered design assets. Discussed with @shampton that he would try to get it working and otherwise resort to a simpler single color block loading element with a similar single color animation as skeleton-loader-basic before merging. Afterward we can iterate and get back to that. This might need an update to our design guidelines at https://design.gitlab.com/components/skeleton-loader/ regardless.

I couldn't quite get the full skeleton card to animate like you wanted. I think it would be better to open up another issue for it as it's kind of new territory for skeleton loading. My current solution is just a few of the dark gray boxes are animating (seen in the GIF in the description). I hope that is enough for this MVC! Let me know what you think.

Proposal

We need to take a look at it again and sync up with https://gitlab.com/gitlab-org/design.gitlab.com/issues/232 in order to solve this and improve on its current implementation

Permissions and Security

Documentation

What does success look like, and how can we measure that?

What is the type of buyer?

Links / references