diff --git a/ee/app/assets/javascripts/security_dashboard/components/shared/vulnerability_report/vulnerability_list.vue b/ee/app/assets/javascripts/security_dashboard/components/shared/vulnerability_report/vulnerability_list.vue
index 5552049cbd4c47eb9031ad4fc3fd9a2b09066dd0..ddfe4628ea904efd86079f484f99aa8ccfdaa39c 100644
--- a/ee/app/assets/javascripts/security_dashboard/components/shared/vulnerability_report/vulnerability_list.vue
+++ b/ee/app/assets/javascripts/security_dashboard/components/shared/vulnerability_report/vulnerability_list.vue
@@ -125,6 +125,9 @@ export default {
     shouldShowSelectionSummary() {
       return this.numOfSelectedVulnerabilities > 0;
     },
+    shouldShowTable() {
+      return this.isLoading || this.vulnerabilities.length;
+    },
   },
   watch: {
     vulnerabilities() {
@@ -237,11 +240,14 @@ export default {
     </portal>
 
     <gl-table
+      v-if="shouldShowTable"
       class="vulnerability-list"
       :busy="isLoading"
       :fields="displayFields"
       :items="vulnerabilities"
-      :thead-class="{ 'below-selection-summary': shouldShowSelectionSummary }"
+      :thead-class="{
+        'below-selection-summary': shouldShowSelectionSummary,
+      }"
       :sort-desc="sort.sortDesc"
       :sort-by="sort.sortBy"
       sort-direction="last"
@@ -249,7 +255,6 @@ export default {
       no-local-sorting
       no-sort-reset
       stacked="sm"
-      show-empty
       hover
       primary-key="id"
       :tbody-tr-class="{ 'gl-cursor-pointer': canAdminVulnerability }"
@@ -391,11 +396,9 @@ export default {
       <template #table-busy>
         <gl-skeleton-loader v-for="n in pageSize" :key="n" :lines="2" />
       </template>
-
-      <template #empty>
-        <filters-produced-no-results v-if="hasVulnerabilities" class="gl-cursor-default" />
-        <dashboard-has-no-vulnerabilities v-else class="gl-cursor-default" />
-      </template>
     </gl-table>
+
+    <filters-produced-no-results v-else-if="hasVulnerabilities" class="gl-cursor-default gl-my-5" />
+    <dashboard-has-no-vulnerabilities v-else class="gl-cursor-default gl-my-5" />
   </div>
 </template>
diff --git a/ee/app/assets/javascripts/security_dashboard/components/shared/vulnerability_report/vulnerability_list_graphql.vue b/ee/app/assets/javascripts/security_dashboard/components/shared/vulnerability_report/vulnerability_list_graphql.vue
index 0c57482711c8867057ad613dafc6285257bb4a49..5cf2fcf89dd3a8c2ca80ffb79ff43a13149acdcc 100644
--- a/ee/app/assets/javascripts/security_dashboard/components/shared/vulnerability_report/vulnerability_list_graphql.vue
+++ b/ee/app/assets/javascripts/security_dashboard/components/shared/vulnerability_report/vulnerability_list_graphql.vue
@@ -227,6 +227,7 @@ export default {
     />
 
     <div
+      v-if="isLoadingVulnerabilities || vulnerabilities.length"
       class="gl-mt-6"
       :class="{
         'gl-text-center gl-relative vulnerability-report-footer-mobile': hasPagination,
diff --git a/ee/spec/frontend/security_dashboard/components/shared/vulnerability_report/vulnerability_list_graphql_spec.js b/ee/spec/frontend/security_dashboard/components/shared/vulnerability_report/vulnerability_list_graphql_spec.js
index 46fcc71ffd5906ef6eafa5212ac901c79b02f3c5..d9e7ed2f140ff451f0cd6ae2ae05177d2c7304af 100644
--- a/ee/spec/frontend/security_dashboard/components/shared/vulnerability_report/vulnerability_list_graphql_spec.js
+++ b/ee/spec/frontend/security_dashboard/components/shared/vulnerability_report/vulnerability_list_graphql_spec.js
@@ -30,14 +30,14 @@ const portalName = 'portal-name';
 const SORT_OBJECT = { sortBy: 'detected', sortDesc: true };
 const DEFAULT_SORT = `${FIELDS.SEVERITY.key}_desc`;
 
-const createVulnerabilitiesRequestHandler = (options) =>
+const createVulnerabilitiesRequestHandler = (options, nodes = vulnerabilities) =>
   jest.fn().mockResolvedValue({
     data: {
       group: {
         id: 'group-1',
         __typename: 'Group',
         vulnerabilities: {
-          nodes: vulnerabilities,
+          nodes,
           pageInfo: {
             __typename: 'PageInfo',
             startCursor: 'abc',
@@ -373,5 +373,12 @@ describe('Vulnerability list GraphQL component', () => {
 
       expect(findLocalStorageSync().props('value')).toBe(pageSize);
     });
+
+    it('is not shown when loaded and there are no vulnerabilities', async () => {
+      createWrapper({ vulnerabilitiesHandler: createVulnerabilitiesRequestHandler({}, []) });
+      await waitForPromises();
+
+      expect(findPageSizeSelector().exists()).toBe(false);
+    });
   });
 });
diff --git a/ee/spec/frontend/security_dashboard/components/shared/vulnerability_report/vulnerability_list_spec.js b/ee/spec/frontend/security_dashboard/components/shared/vulnerability_report/vulnerability_list_spec.js
index 69df11eb6eadd5e43b75533a3ea4bede15bfbf8c..4bd4e4295d376a136ba2637608d466fdb280ff59 100644
--- a/ee/spec/frontend/security_dashboard/components/shared/vulnerability_report/vulnerability_list_spec.js
+++ b/ee/spec/frontend/security_dashboard/components/shared/vulnerability_report/vulnerability_list_spec.js
@@ -593,7 +593,7 @@ describe('Vulnerability list component', () => {
   describe('sorting', () => {
     it('passes the sort prop to the table', () => {
       const sort = { sortBy: 'a', sortDesc: true };
-      createWrapper({ stubs: { GlTable: true }, props: { sort } });
+      createWrapper({ stubs: { GlTable: true }, props: { sort, vulnerabilities } });
 
       expect(findTable().attributes()).toMatchObject({
         'sort-by': sort.sortBy,
@@ -602,7 +602,7 @@ describe('Vulnerability list component', () => {
     });
 
     it('emits sort data in expected format', () => {
-      createWrapper();
+      createWrapper({ props: { vulnerabilities } });
 
       const sort = { sortBy: 'state', sortDesc: true };
       findTable().vm.$emit('sort-changed', sort);