Evaluate a modular loading skeleton
Following the discussions in https://gitlab.com/gitlab-org/design.gitlab.com/issues/256 and gitlab-org/gitlab-ui#235, 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!
- 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
- 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
- Picking some of these generated elements could compose simple elements that could have some structure (see
3), nested elements (see
4) or even compose more complex elements (see
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.
- 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|