Evaluate a modular loading skeleton
Problem
Following the discussions in https://gitlab.com/gitlab-org/design.gitlab.com/issues/256 and gitlab-org/gitlab-ui#235 (closed), it could be interesting to see if it would be possible to build a modular loading skeleton component that could take various forms. The idea was captured in the discussion in https://gitlab.com/gitlab-org/design.gitlab.com/issues/256#note_161462055. Thanks @tauriedavis for inspiring this!
Proposal
- This is a quick draft to evaluate the idea of such a modular loading skeleton starting with a single square element where the output of this would be two single elements, a rounded square, and a circle (see
1
). - Changing the size and the length of the element could easily create larger blocks that could be reused to make up more sophisticated elements (see
2
). - Picking some of these generated elements could compose simple elements that could have some structure (see
3
), nested elements (see4
) or even compose more complex elements (see5
).
Benefits
All the following screenshots are made with two primary elements scaled in size and length. During the component creation, this could be a single element that adapts radius, size, and length to generate all the following combinations.
Challenges
- Defining clear scaling specs, which would allow building a more complex element effortlessly.
- Having nested elements, which could be dropped as an idea in the name of having such a flexible single component.
1. The square |
---|
2. Change the size and length | 3. Compose simple elements |
---|---|
4. Create nested elements | 5. Compose more complex elements |
---|---|
Edited by George Tsiolis