Skip to content

Add skeleton loading for catalog list

What does this MR do and why?

Instead of the default spinner icon when loading ci/cd catalog resources, we want to implement a custom skeleton loader that will make the perceived performance faster and also general ease on the eyes.

Screenshots or screen recordings

Before After
Screenshot_2023-05-15_at_3.27.57_PM Screenshot_2023-05-16_at_4.04.51_PM

How to set up and validate locally

  1. Make sure you have an ultimate license for your GDK
  2. Enable the feature flag: ci_namespace_catalog_experimental
  3. Login as a user
  4. Create a few projects that you will be able to convert to Ci resources (ideally 20+).
  5. Once you have done so, get the ID of the first new project you wanted to convert. Then in Rails console, run:
projects = Project.where("id > ?", your_first_project_id)
projects.each do |project|
  project.update!(description: 'description')  
  ::Ci::Catalog::Resource.new(project_id: project.id).save   
end  
  1. Navigate to /$namespace/$project/-/ci/catalog/resources
  2. Notice the loading state is now a skeleton loader and not a spinner

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Related to #406812 (closed)

Edited by Frédéric Caplette

Merge request reports