1 files changed, 28 insertions, 12 deletions
diff --git a/app/assets/javascripts/vue_shared/components/registry/title_area.vue b/app/assets/javascripts/vue_shared/components/registry/title_area.vue
index 4d47a34c9a3..c63d91b78d3 100644
--- a/app/assets/javascripts/vue_shared/components/registry/title_area.vue
+++ b/app/assets/javascripts/vue_shared/components/registry/title_area.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlAvatar, GlSprintf, GlLink } from '@gitlab/ui';
+import { GlAvatar, GlSprintf, GlLink, GlSkeletonLoader } from '@gitlab/ui';
 
 export default {
   name: 'TitleArea',
@@ -7,6 +7,7 @@ export default {
     GlAvatar,
     GlSprintf,
     GlLink,
+    GlSkeletonLoader,
   },
   props: {
     avatar: {
@@ -24,6 +25,11 @@ export default {
       default: () => [],
       required: false,
     },
+    metadataLoading: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
@@ -32,11 +38,11 @@ export default {
   },
   async mounted() {
     const METADATA_PREFIX = 'metadata-';
-    this.metadataSlots = Object.keys(this.$slots).filter(k => k.startsWith(METADATA_PREFIX));
+    this.metadataSlots = Object.keys(this.$slots).filter((k) => k.startsWith(METADATA_PREFIX));
 
     // we need to wait for next tick to ensure that dynamic names slots are picked up
     await this.$nextTick();
-    this.metadataSlots = Object.keys(this.$slots).filter(k => k.startsWith(METADATA_PREFIX));
+    this.metadataSlots = Object.keys(this.$slots).filter((k) => k.startsWith(METADATA_PREFIX));
   },
 };
 </script>
@@ -44,7 +50,7 @@ export default {
 <template>
   <div class="gl-display-flex gl-flex-direction-column">
     <div class="gl-display-flex gl-justify-content-space-between gl-py-3">
-      <div class="gl-flex-direction-column">
+      <div class="gl-flex-direction-column gl-flex-grow-1">
         <div class="gl-display-flex">
           <gl-avatar
             v-if="avatar"
@@ -68,13 +74,23 @@ export default {
         </div>
 
         <div class="gl-display-flex gl-flex-wrap gl-align-items-center gl-mt-3">
-          <div
-            v-for="(row, metadataIndex) in metadataSlots"
-            :key="metadataIndex"
-            class="gl-display-flex gl-align-items-center gl-mr-5"
-          >
-            <slot :name="row"></slot>
-          </div>
+          <template v-if="!metadataLoading">
+            <div
+              v-for="(row, metadataIndex) in metadataSlots"
+              :key="metadataIndex"
+              class="gl-display-flex gl-align-items-center gl-mr-5"
+            >
+              <slot :name="row"></slot>
+            </div>
+          </template>
+          <template v-else>
+            <div class="gl-w-full">
+              <gl-skeleton-loader :width="960" :height="16" preserve-aspect-ratio="xMinYMax meet">
+                <circle cx="6" cy="8" r="6" />
+                <rect x="16" y="4" width="200" height="8" rx="4" />
+              </gl-skeleton-loader>
+            </div>
+          </template>
         </div>
       </div>
       <div v-if="$slots['right-actions']" class="gl-mt-3">
@@ -89,7 +105,7 @@ export default {
         data-testid="info-message"
       >
         <gl-sprintf :message="message.text">
-          <template #docLink="{content}">
+          <template #docLink="{ content }">
             <gl-link :href="message.link" target="_blank">{{ content }}</gl-link>
           </template>
         </gl-sprintf>