1 files changed, 57 insertions, 0 deletions
diff --git a/app/assets/javascripts/ci/catalog/components/list/catalog_list_skeleton_loader.vue b/app/assets/javascripts/ci/catalog/components/list/catalog_list_skeleton_loader.vue
new file mode 100644
index 00000000000..3722b8e6c59
--- /dev/null
+++ b/app/assets/javascripts/ci/catalog/components/list/catalog_list_skeleton_loader.vue
@@ -0,0 +1,57 @@
+<script>
+import { GlSkeletonLoader } from '@gitlab/ui';
+
+export default {
+  components: {
+    GlSkeletonLoader,
+  },
+  data() {
+    return {
+      coordinates: {
+        statsX: 0,
+        releaseDateX: 0,
+      },
+      width: 0,
+    };
+  },
+  mounted() {
+    this.setSvgSize();
+  },
+  methods: {
+    setSvgSize() {
+      this.width = this.$el.offsetWidth;
+      this.coordinates.releaseDateX = this.width - 200;
+      this.coordinates.statsX = this.width - 90;
+    },
+  },
+  skeletonLoadItems: new Array(5),
+};
+</script>
+<template>
+  <div class="gl-w-full">
+    <gl-skeleton-loader
+      v-for="(_, index) in $options.skeletonLoadItems"
+      :key="index"
+      :height="60"
+      :width="width"
+    >
+      <!-- Catalog project avatar -->
+      <rect x="0" y="0" width="48" height="48" rx="4" ry="4" />
+      <!-- namespace path -->
+      <rect x="60" y="4" width="400" height="16" rx="2" ry="2" />
+      <!-- Project description -->
+      <rect x="60" y="30" width="500" height="12" rx="2" ry="2" />
+
+      <!-- Release date line -->
+      <rect :x="coordinates.releaseDateX" y="30" width="200" height="12" rx="2" ry="2" />
+
+      <!-- Favorites -->
+      <rect :x="coordinates.statsX" y="4" width="16" height="16" rx="2" ry="2" />
+      <rect :x="coordinates.statsX + 18" y="7" width="18" height="10" rx="2" ry="2" />
+
+      <!-- Forks -->
+      <rect :x="coordinates.statsX + 50" y="4" width="16" height="16" rx="2" ry="2" />
+      <rect :x="coordinates.statsX + 68" y="7" width="18" height="10" rx="2" ry="2" />
+    </gl-skeleton-loader>
+  </div>
+</template>