1 files changed, 15 insertions, 6 deletions
diff --git a/app/assets/javascripts/packages_and_registries/dependency_proxy/components/manifests_list.vue b/app/assets/javascripts/packages_and_registries/dependency_proxy/components/manifests_list.vue
index 9870841f1ff..94c958308dd 100644
--- a/app/assets/javascripts/packages_and_registries/dependency_proxy/components/manifests_list.vue
+++ b/app/assets/javascripts/packages_and_registries/dependency_proxy/components/manifests_list.vue
@@ -2,11 +2,13 @@
 import { GlKeysetPagination, GlSkeletonLoader } from '@gitlab/ui';
 import { s__ } from '~/locale';
 import ManifestRow from '~/packages_and_registries/dependency_proxy/components/manifest_row.vue';
+import ManifestsEmptyState from '~/packages_and_registries/dependency_proxy/components/manifests_empty_state.vue';
 
 export default {
   name: 'ManifestsLists',
   components: {
     ManifestRow,
+    ManifestsEmptyState,
     GlKeysetPagination,
     GlSkeletonLoader,
   },
@@ -18,7 +20,8 @@ export default {
     },
     pagination: {
       type: Object,
-      required: true,
+      required: false,
+      default: () => ({}),
     },
     loading: {
       type: Boolean,
@@ -44,12 +47,18 @@ export default {
 
 <template>
   <div class="gl-mt-6">
-    <h3 class="gl-font-base">{{ $options.i18n.listTitle }}</h3>
-    <gl-skeleton-loader v-if="loading" />
+    <h3 class="gl-font-base gl-pb-3 gl-mb-0 gl-border-b-1 gl-border-gray-100 gl-border-b-solid">
+      {{ $options.i18n.listTitle }}
+    </h3>
+
+    <div v-if="loading" class="gl-py-3">
+      <gl-skeleton-loader />
+    </div>
+
+    <manifests-empty-state v-else-if="manifests.length === 0" />
+
     <div v-else data-testid="main-area">
-      <div
-        class="gl-border-t-1 gl-border-gray-100 gl-border-t-solid gl-display-flex gl-flex-direction-column"
-      >
+      <div class="gl-display-flex gl-flex-direction-column">
         <manifest-row
           v-for="(manifest, index) in manifests"
           :key="index"