diff options
Diffstat (limited to 'app/assets/javascripts/packages/shared/components/packages_list_loader.vue')
-rw-r--r-- | app/assets/javascripts/packages/shared/components/packages_list_loader.vue | 58 |
1 files changed, 16 insertions, 42 deletions
diff --git a/app/assets/javascripts/packages/shared/components/packages_list_loader.vue b/app/assets/javascripts/packages/shared/components/packages_list_loader.vue index cd9ef74d467..efd9f8db908 100644 --- a/app/assets/javascripts/packages/shared/components/packages_list_loader.vue +++ b/app/assets/javascripts/packages/shared/components/packages_list_loader.vue @@ -5,40 +5,13 @@ export default { components: { GlSkeletonLoader, }, - props: { - isGroup: { - type: Boolean, - required: false, - default: false, - }, - }, - computed: { - desktopShapes() { - return this.isGroup ? this.$options.shapes.groups : this.$options.shapes.projects; - }, - desktopHeight() { - return this.isGroup ? 38 : 54; - }, - mobileHeight() { - return this.isGroup ? 160 : 170; - }, - }, - shapes: { - groups: [ - { type: 'rect', width: '100', height: '10', x: '0', y: '15' }, - { type: 'rect', width: '100', height: '10', x: '195', y: '15' }, - { type: 'rect', width: '60', height: '10', x: '475', y: '15' }, - { type: 'rect', width: '60', height: '10', x: '675', y: '15' }, - { type: 'rect', width: '100', height: '10', x: '900', y: '15' }, - ], - projects: [ - { type: 'rect', width: '220', height: '10', x: '0', y: '20' }, - { type: 'rect', width: '60', height: '10', x: '305', y: '20' }, - { type: 'rect', width: '60', height: '10', x: '535', y: '20' }, - { type: 'rect', width: '100', height: '10', x: '760', y: '20' }, - { type: 'rect', width: '30', height: '30', x: '970', y: '10', ref: 'button-loader' }, - ], - }, + shapes: [ + { type: 'rect', width: '220', height: '10', x: '0', y: '20' }, + { type: 'rect', width: '60', height: '10', x: '305', y: '20' }, + { type: 'rect', width: '60', height: '10', x: '535', y: '20' }, + { type: 'rect', width: '100', height: '10', x: '760', y: '20' }, + { type: 'rect', width: '30', height: '30', x: '970', y: '10', ref: 'button-loader' }, + ], rowsToRender: { mobile: 5, desktop: 20, @@ -48,34 +21,35 @@ export default { <template> <div> - <div class="d-xs-flex flex-column d-md-none"> + <div class="gl-flex-direction-column gl-display-sm-none" data-testid="mobile-loader"> <gl-skeleton-loader v-for="index in $options.rowsToRender.mobile" :key="index" :width="500" - :height="mobileHeight" + :height="170" preserve-aspect-ratio="xMinYMax meet" > <rect width="500" height="10" x="0" y="15" rx="4" /> <rect width="500" height="10" x="0" y="45" rx="4" /> <rect width="500" height="10" x="0" y="75" rx="4" /> <rect width="500" height="10" x="0" y="105" rx="4" /> - <rect v-if="isGroup" width="500" height="10" x="0" y="135" rx="4" /> - <rect v-else width="30" height="30" x="470" y="135" rx="4" /> + <rect width="500" height="10" x="0" y="135" rx="4" /> </gl-skeleton-loader> </div> - - <div class="d-none d-md-flex flex-column"> + <div + class="gl-display-none gl-display-sm-flex gl-flex-direction-column" + data-testid="desktop-loader" + > <gl-skeleton-loader v-for="index in $options.rowsToRender.desktop" :key="index" :width="1000" - :height="desktopHeight" + :height="54" preserve-aspect-ratio="xMinYMax meet" > <component :is="r.type" - v-for="(r, rIndex) in desktopShapes" + v-for="(r, rIndex) in $options.shapes" :key="rIndex" rx="4" v-bind="r" |