Skip to content

Switch loaders to gl-animate-skeleton-loader

What does this MR do and why?

Switches to html/css based skeleton loading indicator in Usage Quotas > Storage, for some cards.

MR acceptance checklist

Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Screenshots or screen recordings

Screenshots are required for UI changes, and strongly recommended for all other merge requests.

Before After
2023-12-21_18.40.07 2023-12-21_18.38.42

How to set up and validate locally

  1. Apply this diff:
diff
diff --git a/ee/app/assets/javascripts/usage_quotas/storage/components/namespace_storage_app.stories.js b/ee/app/assets/javascripts/usage_quotas/storage/components/namespace_storage_app.stories.js
index 54b1983c9555..db163b5dfee5 100644
--- a/ee/app/assets/javascripts/usage_quotas/storage/components/namespace_storage_app.stories.js
+++ b/ee/app/assets/javascripts/usage_quotas/storage/components/namespace_storage_app.stories.js
@@ -26,8 +26,8 @@ const createTemplate = (config = {}) => {
 
   if (apolloProvider == null) {
     const requestHandlers = [
-      [getNamespaceStorageQuery, () => Promise.resolve(mockGetNamespaceStorageGraphQLResponse)],
-      [getProjectListStorageQuery, () => Promise.resolve(mockGetProjectListStorageGraphQLResponse)],
+      [getNamespaceStorageQuery, () => new Promise(resolve => setTimeout(() => resolve(mockGetNamespaceStorageGraphQLResponse), 1000))],
+      [getProjectListStorageQuery, () => new Promise(resolve => setTimeout(() => resolve(mockGetProjectListStorageGraphQLResponse), 1000))],
     ];
     apolloProvider = createMockApollo(requestHandlers);
   }
  1. Download fixtures via or run bundle exec rspec ee/spec/frontend/fixtures/namespace.rb.
  2. Start storybook via npm run storybook:start
  3. Open http://localhost:9002/?path=/story/ee-usage-quotas-storage-namespace-storage-app--saas-with-namespace-limits
Edited by Kos Palchyk

Merge request reports