Skeleton Component - create Vue component
Problem to solve
Create a content loader that will enable developers to create skeleton states as needed throughout gitlab
.
Proposal
- Create our own version of vue-content-loader within
gitlab-ui
effectively porting over https://github.com/egoist/vue-content-loader into gitlab-ui. - Provide technical documentation on how to use the component and best practices for creating skeleton states. This should include guidelines on how to enable progressive loading which also relies on backend.
Further information
To allow for progressive loading. BE needs to be able to deliver data in bite-sized bits so these can be loaded individually (if this indeed provides a speed improvement in the end for the user).
The skeleton state should preferable not be replaced in its entirety but in small amounts that make sense from an engineering perspective and from a user perspective. This way we’ll be able to deliver context almost immediately when the user opens the page and they might find out about their information a little sooner, resulting in an application that is more efficient and responsive.
The problem with loading bits of information is that almost 99% of our codebase doesn’t function in a way that could deliver the data like that. It works in a “send request -> get response” kind of way where you just request information, wait a bit, and get everything in bulk.
We’ve been exploring the use of GraphQL lately, which could be the ideal way we could provide information like this.
If GraphQL is the limiting factor to enable progressive loading, this should be documented. We should be able to offer a clear documented way of properly implementing skeleton states with and/or without progressive loading.