diff --git a/ee/app/assets/javascripts/vue_shared/security_reports/components/status_badge.vue b/ee/app/assets/javascripts/vue_shared/security_reports/components/status_badge.vue
index 5d1e7d13a662ad8f533f55d9022c2c615f554072..b1a524eedef6512c79955943a2828209e1fbe2e6 100644
--- a/ee/app/assets/javascripts/vue_shared/security_reports/components/status_badge.vue
+++ b/ee/app/assets/javascripts/vue_shared/security_reports/components/status_badge.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlBadge } from '@gitlab/ui';
+import { GlBadge, GlLoadingIcon } from '@gitlab/ui';
 
 import { VULNERABILITY_STATES } from 'ee/vulnerabilities/constants';
 
@@ -13,6 +13,7 @@ export const VARIANTS = {
 export default {
   components: {
     GlBadge,
+    GlLoadingIcon,
   },
   props: {
     state: {
@@ -20,6 +21,11 @@ export default {
       required: true,
       validator: (state) => Object.keys(VARIANTS).includes(state),
     },
+    loading: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   computed: {
     stateName() {
@@ -34,6 +40,7 @@ export default {
 
 <template>
   <gl-badge :variant="stateVariant">
-    {{ stateName }}
+    <gl-loading-icon v-if="loading" size="sm" class="gl-mx-5" />
+    <template v-else>{{ stateName }}</template>
   </gl-badge>
 </template>
diff --git a/ee/app/assets/javascripts/vulnerabilities/components/header.vue b/ee/app/assets/javascripts/vulnerabilities/components/header.vue
index 9e97895a9ec395a00ce0b9090437fc28c35724ee..47275598f2ce9cc15349cf753d10b99f09c16619 100644
--- a/ee/app/assets/javascripts/vulnerabilities/components/header.vue
+++ b/ee/app/assets/javascripts/vulnerabilities/components/header.vue
@@ -218,8 +218,11 @@ export default {
     />
     <div class="detail-page-header">
       <div class="detail-page-header-body" data-testid="vulnerability-detail-body">
-        <gl-loading-icon v-if="isLoadingVulnerability" size="sm" class="gl-mr-3" />
-        <status-badge v-else :state="vulnerability.state" class="gl-mr-3" />
+        <status-badge
+          :state="vulnerability.state"
+          :loading="isLoadingVulnerability"
+          class="gl-mr-3"
+        />
         <status-description
           :vulnerability="vulnerability"
           :user="user"
diff --git a/ee/spec/frontend/vue_shared/security_reports/components/status_badge_spec.js b/ee/spec/frontend/vue_shared/security_reports/components/status_badge_spec.js
index b8e60c8e32cbc1a2a3f0e83e3d93c22445921362..8dd9abc95734c916595e416c64a907315a3312d0 100644
--- a/ee/spec/frontend/vue_shared/security_reports/components/status_badge_spec.js
+++ b/ee/spec/frontend/vue_shared/security_reports/components/status_badge_spec.js
@@ -1,5 +1,5 @@
 import { mount } from '@vue/test-utils';
-import { GlBadge } from '@gitlab/ui';
+import { GlBadge, GlLoadingIcon } from '@gitlab/ui';
 import StatusBadge, { VARIANTS } from 'ee/vue_shared/security_reports/components/status_badge.vue';
 import { VULNERABILITY_STATES } from 'ee/vulnerabilities/constants';
 import { assertProps } from 'helpers/assert_props';
@@ -8,11 +8,13 @@ describe('StatusBadge', () => {
   let wrapper;
 
   const findBadge = () => wrapper.findComponent(GlBadge);
+  const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
 
-  const createWrapper = (state) => {
+  const createWrapper = ({ state, loading }) => {
     wrapper = mount(StatusBadge, {
       propsData: {
         state,
+        loading,
       },
     });
   };
@@ -20,7 +22,7 @@ describe('StatusBadge', () => {
   it.each(Object.entries(VARIANTS))(
     'the vulnerability state badge has the correct style for the %s state',
     (state, variant) => {
-      createWrapper(state);
+      createWrapper({ state });
       const badge = findBadge();
 
       expect(badge.props('variant')).toBe(variant);
@@ -33,4 +35,10 @@ describe('StatusBadge', () => {
       assertProps(StatusBadge, { state: 'invalid-prop' });
     }).toThrow('Invalid prop: custom validator check failed for prop');
   });
+
+  it.each([true, false])('renders the loading icon: "%s"', (loading) => {
+    createWrapper({ state: 'detected', loading });
+
+    expect(findLoadingIcon().exists()).toBe(loading);
+  });
 });
diff --git a/ee/spec/frontend/vulnerabilities/header_spec.js b/ee/spec/frontend/vulnerabilities/header_spec.js
index f9c49fb25cc231d63680cb5a324e949e2bbde144..7365ca21a9cc23a69030dcbbf4abef6175d4ea7d 100644
--- a/ee/spec/frontend/vulnerabilities/header_spec.js
+++ b/ee/spec/frontend/vulnerabilities/header_spec.js
@@ -134,12 +134,12 @@ describe('Vulnerability Header', () => {
         createWrapper({ apolloProvider });
       });
 
-      it('shows the loading spinner but not the status badge', async () => {
+      it('shows the loading icon and passes the correct "loading" prop to the status badge', async () => {
         changeStatus(action);
         await nextTick();
 
         expect(findGlLoadingIcon().exists()).toBe(true);
-        expect(findStatusBadge().exists()).toBe(false);
+        expect(findStatusBadge().props('loading')).toBe(true);
       });
 
       it(`emits the updated vulnerability properly - ${action}`, async () => {
@@ -158,12 +158,12 @@ describe('Vulnerability Header', () => {
         expect(wrapper.emitted()['vulnerability-state-change']).toHaveLength(1);
       });
 
-      it('hides the loading spinner and shows the status badge', async () => {
+      it('does not show the loading icon and passes the correct "loading" prop to the status badge', async () => {
         changeStatus(action);
         await waitForPromises();
 
         expect(findGlLoadingIcon().exists()).toBe(false);
-        expect(findStatusBadge().exists()).toBe(true);
+        expect(findStatusBadge().props('loading')).toBe(false);
       });
     });