diff --git a/app/assets/javascripts/projects/tree/components/commit_pipeline_status.vue b/app/assets/javascripts/projects/tree/components/commit_pipeline_status.vue
index 7286f91d80758f89c49b69736376936c5a520e5c..d7c38875d86793e735bd0c454d9fc4e53463c4af 100644
--- a/app/assets/javascripts/projects/tree/components/commit_pipeline_status.vue
+++ b/app/assets/javascripts/projects/tree/components/commit_pipeline_status.vue
@@ -1,6 +1,7 @@
 <script>
 import { GlLoadingIcon, GlTooltipDirective } from '@gitlab/ui';
 import Visibility from 'visibilityjs';
+import { isEmpty } from 'lodash';
 import { createAlert } from '~/alert';
 import Poll from '~/lib/utils/poll';
 import { __, s__, sprintf } from '~/locale';
@@ -33,6 +34,9 @@ export default {
         ciStatus: this.ciStatus.text,
       });
     },
+    hasCiStatus() {
+      return !isEmpty(this.ciStatus) && !this.isLoading;
+    },
   },
   mounted() {
     this.service = new CommitPipelineService(this.endpoint);
@@ -44,10 +48,14 @@ export default {
   methods: {
     successCallback(res) {
       const { pipelines } = res.data;
+
       if (pipelines.length > 0) {
         // The pipeline entity always keeps the latest pipeline info on the `details.status`
         this.ciStatus = pipelines[0].details.status;
+      } else {
+        this.ciStatus = {};
       }
+
       this.isLoading = false;
     },
     errorCallback() {
@@ -92,9 +100,12 @@ export default {
 </script>
 <template>
   <div class="gl-ml-5">
-    <gl-loading-icon v-if="isLoading" size="sm" label="Loading pipeline status" />
-    <a v-else :href="ciStatus.details_path">
-      <ci-icon :status="ciStatus" :title="statusTitle" :aria-label="statusTitle" />
-    </a>
+    <gl-loading-icon v-if="isLoading" size="sm" :label="__('Loading pipeline status')" />
+    <ci-icon
+      v-else-if="hasCiStatus"
+      :status="ciStatus"
+      :title="statusTitle"
+      :aria-label="statusTitle"
+    />
   </div>
 </template>
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index bfd9832cdebdebe68b2a290c9d0838c30bb794ab..79a7be3ac16acfc6a77f8a84cdb34c3e272803a4 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -32491,6 +32491,9 @@ msgstr ""
 msgid "Loading more"
 msgstr ""
 
+msgid "Loading pipeline status"
+msgstr ""
+
 msgid "Loading snippet"
 msgstr ""
 
diff --git a/spec/frontend/commit/commit_pipeline_status_spec.js b/spec/frontend/commit/commit_pipeline_status_spec.js
index 6d407ed886ad56781260eea08f7e8cc9ed29e19f..e0e1f5b17a28b36eb39758870925720e0ca8e10b 100644
--- a/spec/frontend/commit/commit_pipeline_status_spec.js
+++ b/spec/frontend/commit/commit_pipeline_status_spec.js
@@ -38,8 +38,7 @@ describe('Commit pipeline status component', () => {
   };
 
   const findLoader = () => wrapper.findComponent(GlLoadingIcon);
-  const findLink = () => wrapper.find('a');
-  const findCiIcon = () => findLink().findComponent(CiIcon);
+  const findCiIcon = () => wrapper.findComponent(CiIcon);
 
   describe('Visibility management', () => {
     describe('when component is hidden', () => {
@@ -121,24 +120,36 @@ describe('Commit pipeline status component', () => {
     });
 
     describe('is successful', () => {
-      beforeEach(async () => {
-        pollConfig.successCallback({
-          data: { pipelines: [{ details: { status: mockCiStatus } }] },
+      describe('with pipelines', () => {
+        beforeEach(async () => {
+          pollConfig.successCallback({
+            data: { pipelines: [{ details: { status: mockCiStatus } }] },
+          });
+          await nextTick();
         });
-        await nextTick();
-      });
 
-      it('does not render loader', () => {
-        expect(findLoader().exists()).toBe(false);
-      });
+        it('does not render loader', () => {
+          expect(findLoader().exists()).toBe(false);
+        });
 
-      it('renders link with href', () => {
-        expect(findLink().attributes('href')).toEqual(mockCiStatus.details_path);
+        it('renders CI icon with the correct title and status', () => {
+          expect(findCiIcon().attributes('title')).toEqual('Pipeline: Passed');
+          expect(findCiIcon().props('status')).toEqual(mockCiStatus);
+        });
       });
 
-      it('renders CI icon with the correct title and status', () => {
-        expect(findCiIcon().attributes('title')).toEqual('Pipeline: Passed');
-        expect(findCiIcon().props('status')).toEqual(mockCiStatus);
+      describe('without pipelines', () => {
+        beforeEach(async () => {
+          pollConfig.successCallback({
+            data: { pipelines: [] },
+          });
+
+          await nextTick();
+        });
+
+        it('does not render ci icon', () => {
+          expect(findCiIcon().exists()).toBe(false);
+        });
       });
     });
 
@@ -151,10 +162,6 @@ describe('Commit pipeline status component', () => {
         expect(findLoader().exists()).toBe(false);
       });
 
-      it('renders link with href', () => {
-        expect(findLink().attributes('href')).toBeUndefined();
-      });
-
       it('renders not found CI icon', () => {
         expect(findCiIcon().attributes('title')).toEqual('Pipeline: not found');
         expect(findCiIcon().props('status')).toEqual({