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 |
---|---|
How to set up and validate locally
- 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);
}
- Download fixtures via or run
bundle exec rspec ee/spec/frontend/fixtures/namespace.rb
. - Start storybook via
npm run storybook:start
- Open http://localhost:9002/?path=/story/ee-usage-quotas-storage-namespace-storage-app--saas-with-namespace-limits
Edited by Kos Palchyk