1 files changed, 27 insertions, 23 deletions

diff --git a/app/assets/javascripts/jobs/components/table/jobs_table_tabs.vue b/app/assets/javascripts/jobs/components/table/jobs_table_tabs.vue
index 26791e4284d..0a25dc5bea5 100644
--- a/app/assets/javascripts/jobs/components/table/jobs_table_tabs.vue
+++ b/app/assets/javascripts/jobs/components/table/jobs_table_tabs.vue
@@ -1,56 +1,56 @@
 <script>
-import { GlBadge, GlTab, GlTabs } from '@gitlab/ui';
-import { __ } from '~/locale';
+import { GlBadge, GlTab, GlTabs, GlLoadingIcon } from '@gitlab/ui';
+import { s__ } from '~/locale';
 
 export default {
   components: {
     GlBadge,
     GlTab,
     GlTabs,
+    GlLoadingIcon,
   },
   inject: {
-    jobCounts: {
-      default: {},
-    },
     jobStatuses: {
       default: {},
     },
   },
+  props: {
+    allJobsCount: {
+      type: Number,
+      required: true,
+    },
+    loading: {
+      type: Boolean,
+      required: true,
+    },
+  },
   computed: {
     tabs() {
       return [
         {
-          text: __('All'),
-          count: this.jobCounts.all,
+          text: s__('Jobs|All'),
+          count: this.allJobsCount,
           scope: null,
           testId: 'jobs-all-tab',
+          showBadge: true,
         },
         {
-          text: __('Pending'),
-          count: this.jobCounts.pending,
-          scope: this.jobStatuses.pending,
-          testId: 'jobs-pending-tab',
-        },
-        {
-          text: __('Running'),
-          count: this.jobCounts.running,
-          scope: this.jobStatuses.running,
-          testId: 'jobs-running-tab',
-        },
-        {
-          text: __('Finished'),
-          count: this.jobCounts.finished,
+          text: s__('Jobs|Finished'),
           scope: [this.jobStatuses.success, this.jobStatuses.failed, this.jobStatuses.canceled],
           testId: 'jobs-finished-tab',
+          showBadge: false,
         },
       ];
     },
+    showLoadingIcon() {
+      return this.loading && !this.allJobsCount;
+    },
   },
 };
 </script>
 
 <template>
-  <gl-tabs content-class="gl-pb-0">
+  <gl-tabs content-class="gl-py-0">
     <gl-tab
       v-for="tab in tabs"
       :key="tab.text"
@@ -59,7 +59,11 @@ export default {
     >
       <template #title>
         <span>{{ tab.text }}</span>
-        <gl-badge size="sm" class="gl-tab-counter-badge">{{ tab.count }}</gl-badge>
+        <gl-loading-icon v-if="showLoadingIcon && tab.showBadge" class="gl-ml-2" />
+
+        <gl-badge v-else-if="tab.showBadge" size="sm" class="gl-tab-counter-badge">
+          {{ tab.count }}
+        </gl-badge>
       </template>
     </gl-tab>
   </gl-tabs>