Skip to content

Improve loading state of Boards with swimlanes applied

Problem to solve

While we work on making boards with swimlanes applied more performant- we need to display to users that the issues on their board are loading and will be available soon. As many issues may be in the process of loading, this could possibly take some time, and we want to reduce any uncertainty for users. We also want to reduce risk of overwhelming users with multiple loading states and issues popping in and changing the height of their board, etc. Preventing users from interacting with the data until it is a stable state can also help prevent some error.

This could also apply to classic boards or boards without swimlanes as well.

Current state

User experience goal

Users understand that their entire board is still loading (even at slow internet speeds), or that they have correctly applied a change and their board is in a state of loading to reflect those changes. Users have a general expectation of what type of content will be loaded- reducing uncertainty.

Proposal

For MVC:

  • Introduce a skeleton loader that displays until the initial batch of issues on a board has been fetched. This would apply to boards with and without swimlanes.
    • In other words- the skeleton displays until the first batch of issues has been loaded into all columns, or all initial swimlanes.
    • Spinners would still display in instances when a user is "loading more".
  • Skeleton should be fairly low fidelity and just serve to reduce uncertainty about the board loading, not to represent the exact data on the board.
  • This could look something like: swimlanesloading
  • Add this loader to gitlab-ui and Figma via issues in those projects

Future scope:

  • Ideate perhaps on skeleton loads for swimlanes and maybe columns to enable better progressive loading
Less detailed More detailed
loadingentirecard loadinggranularcards
Low fidelity loading state depicting only the cards loading A bit higher fidelity depicting some metadata loading

Further details

We probably want to keep this fairly consistent with Roadmaps, and improve both as soon as we can.

This page may contain information related to upcoming products, features and functionality. It is important to note that the information presented is for informational purposes only, so please do not rely on the information for purchasing or planning purposes. Just like with all projects, the items mentioned on the page are subject to change or delay, and the development, release, and timing of any products, features, or functionality remain at the sole discretion of GitLab Inc.

Edited by 🤖 GitLab Bot 🤖