1 files changed, 60 insertions, 0 deletions
diff --git a/app/assets/javascripts/packages_and_registries/shared/components/packages_list_loader.vue b/app/assets/javascripts/packages_and_registries/shared/components/packages_list_loader.vue
new file mode 100644
index 00000000000..cf555f46f8c
--- /dev/null
+++ b/app/assets/javascripts/packages_and_registries/shared/components/packages_list_loader.vue
@@ -0,0 +1,60 @@
+<script>
+import { GlSkeletonLoader } from '@gitlab/ui';
+
+export default {
+  components: {
+    GlSkeletonLoader,
+  },
+  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,
+  },
+};
+</script>
+
+<template>
+  <div>
+    <div class="gl-flex-direction-column gl-sm-display-none" data-testid="mobile-loader">
+      <gl-skeleton-loader
+        v-for="index in $options.rowsToRender.mobile"
+        :key="index"
+        :width="500"
+        :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 width="500" height="10" x="0" y="135" rx="4" />
+      </gl-skeleton-loader>
+    </div>
+    <div
+      class="gl-display-none gl-sm-display-flex gl-flex-direction-column"
+      data-testid="desktop-loader"
+    >
+      <gl-skeleton-loader
+        v-for="index in $options.rowsToRender.desktop"
+        :key="index"
+        :width="1000"
+        :height="54"
+        preserve-aspect-ratio="xMinYMax meet"
+      >
+        <component
+          :is="r.type"
+          v-for="(r, rIndex) in $options.shapes"
+          :key="rIndex"
+          rx="4"
+          v-bind="r"
+        />
+      </gl-skeleton-loader>
+    </div>
+  </div>
+</template>