1 files changed, 21 insertions, 12 deletions
diff --git a/app/assets/javascripts/runner/components/runner_list.vue b/app/assets/javascripts/runner/components/runner_list.vue
index bb36882d3ae..51749b0255f 100644
--- a/app/assets/javascripts/runner/components/runner_list.vue
+++ b/app/assets/javascripts/runner/components/runner_list.vue
@@ -1,22 +1,20 @@
 <script>
-import { GlTable, GlTooltipDirective, GlSkeletonLoader } from '@gitlab/ui';
+import { GlTableLite, GlTooltipDirective, GlSkeletonLoader } from '@gitlab/ui';
 import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate/tooltip_on_truncate.vue';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import { __, s__ } from '~/locale';
 import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue';
 import { formatJobCount, tableField } from '../utils';
-import RunnerActionsCell from './cells/runner_actions_cell.vue';
 import RunnerSummaryCell from './cells/runner_summary_cell.vue';
 import RunnerStatusCell from './cells/runner_status_cell.vue';
 import RunnerTags from './runner_tags.vue';
 
 export default {
   components: {
-    GlTable,
+    GlTableLite,
     GlSkeletonLoader,
     TooltipOnTruncate,
     TimeAgo,
-    RunnerActionsCell,
     RunnerSummaryCell,
     RunnerTags,
     RunnerStatusCell,
@@ -35,6 +33,16 @@ export default {
       required: true,
     },
   },
+  computed: {
+    tableClass() {
+      // <gl-table-lite> does not provide a busy state, add
+      // simple support for it.
+      // See http://bootstrap-vue.org/docs/components/table#table-busy-state
+      return {
+        'gl-opacity-6': this.loading,
+      };
+    },
+  },
   methods: {
     formatJobCount(jobCount) {
       return formatJobCount(jobCount);
@@ -62,8 +70,9 @@ export default {
 </script>
 <template>
   <div>
-    <gl-table
-      :busy="loading"
+    <gl-table-lite
+      :aria-busy="loading"
+      :class="tableClass"
       :items="runners"
       :fields="$options.fields"
       :tbody-tr-attr="runnerTrAttr"
@@ -72,10 +81,6 @@ export default {
       primary-key="id"
       fixed
     >
-      <template v-if="!runners.length" #table-busy>
-        <gl-skeleton-loader v-for="i in 4" :key="i" />
-      </template>
-
       <template #cell(status)="{ item }">
         <runner-status-cell :runner="item" />
       </template>
@@ -114,8 +119,12 @@ export default {
       </template>
 
       <template #cell(actions)="{ item }">
-        <runner-actions-cell :runner="item" />
+        <slot name="runner-actions-cell" :runner="item"></slot>
       </template>
-    </gl-table>
+    </gl-table-lite>
+
+    <template v-if="!runners.length && loading">
+      <gl-skeleton-loader v-for="i in 4" :key="i" />
+    </template>
   </div>
 </template>