diff options
Diffstat (limited to 'app/assets/javascripts/vue_shared/security_configuration/components/section_loader.vue')
-rw-r--r-- | app/assets/javascripts/vue_shared/security_configuration/components/section_loader.vue | 35 |
1 files changed, 35 insertions, 0 deletions
diff --git a/app/assets/javascripts/vue_shared/security_configuration/components/section_loader.vue b/app/assets/javascripts/vue_shared/security_configuration/components/section_loader.vue new file mode 100644 index 00000000000..b15e25b0943 --- /dev/null +++ b/app/assets/javascripts/vue_shared/security_configuration/components/section_loader.vue @@ -0,0 +1,35 @@ +<script> +import { GlCard, GlSkeletonLoader } from '@gitlab/ui'; + +export default { + name: 'SectionLoader', + components: { + GlCard, + GlSkeletonLoader, + }, +}; +</script> + +<template> + <div> + <gl-skeleton-loader :width="1248" :height="180"> + <rect x="0" y="0" width="100" height="15" rx="4" /> + <rect x="0" y="24" width="460" height="32" rx="4" /> + <rect x="0" y="71" width="100" height="15" rx="4" /> + <rect x="0" y="95" width="460" height="72" rx="4" /> + </gl-skeleton-loader> + <gl-card v-for="i in 2" :key="i" class="gl-mb-5"> + <template #header> + <gl-skeleton-loader :width="1248" :height="15"> + <rect x="0" y="0" width="300" height="15" rx="4" /> + </gl-skeleton-loader> + </template> + <gl-skeleton-loader :width="1248" :height="15"> + <rect x="0" y="0" width="600" height="15" rx="4" /> + </gl-skeleton-loader> + <gl-skeleton-loader :width="1248" :height="15"> + <rect x="0" y="0" width="300" height="15" rx="4" /> + </gl-skeleton-loader> + </gl-card> + </div> +</template> |