Add a loading indicator for the submit button

When users ask to lint a CI config, the feedback may take over a few
seconds, so they should get feedback that the system is working.

app/assets/javascripts/ci_lint/components/ci_lint.vue

@@ -27,6 +27,7 @@ export default {
   data() {
     return {
       content: '',
+      loading: false,
       valid: false,
       errors: null,
       warnings: null,
@@ -44,6 +45,7 @@ export default {
   },
   methods: {
     async lint() {
+      this.loading = true;
       try {
         const {
           data: {
@@ -62,6 +64,8 @@ export default {
       } catch (error) {
         this.apiError = error;
         this.isErrorDismissed = false;
+      } finally {
+        this.loading = false;
       }
     },
     clear() {
@@ -93,6 +97,7 @@ export default {
       <div class="gl-display-flex gl-align-items-center">
         <gl-button
           class="gl-mr-4"
+          :loading="loading"
           category="primary"
           variant="success"
           data-testid="ci-lint-validate"

spec/frontend/ci_lint/components/ci_lint_spec.js

+import { GlAlert } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
+import waitForPromises from 'helpers/wait_for_promises';
 import EditorLite from '~/vue_shared/components/editor_lite.vue';
 import CiLint from '~/ci_lint/components/ci_lint.vue';
+import CiLintResults from '~/ci_lint/components/ci_lint_results.vue';
 import lintCIMutation from '~/ci_lint/graphql/mutations/lint_ci.mutation.graphql';
+import { mockLintDataValid } from '../mock_data';
 
 describe('CI Lint', () => {
   let wrapper;
@@ -9,6 +13,7 @@ describe('CI Lint', () => {
   const endpoint = '/namespace/project/-/ci/lint';
   const content =
     "test_job:\n  stage: build\n  script: echo 'Building'\n  only:\n    - web\n    - chat\n    - pushes\n  allow_failure: true  ";
+  const mockMutate = jest.fn().mockResolvedValue(mockLintDataValid);
 
   const createComponent = () => {
     wrapper = shallowMount(CiLint, {
@@ -23,13 +28,15 @@ describe('CI Lint', () => {
       },
       mocks: {
         $apollo: {
-          mutate: jest.fn(),
+          mutate: mockMutate,
         },
       },
     });
   };
 
   const findEditor = () => wrapper.find(EditorLite);
+  const findAlert = () => wrapper.find(GlAlert);
+  const findCiLintResults = () => wrapper.find(CiLintResults);
   const findValidateBtn = () => wrapper.find('[data-testid="ci-lint-validate"]');
   const findClearBtn = () => wrapper.find('[data-testid="ci-lint-clear"]');
 
@@ -38,6 +45,7 @@ describe('CI Lint', () => {
   });
 
   afterEach(() => {
+    mockMutate.mockClear();
     wrapper.destroy();
   });
 
@@ -67,6 +75,35 @@ describe('CI Lint', () => {
     });
   });
 
+  it('validation displays results', async () => {
+    findValidateBtn().vm.$emit('click');
+
+    await wrapper.vm.$nextTick();
+
+    expect(findValidateBtn().props('loading')).toBe(true);
+
+    await waitForPromises();
+
+    expect(findCiLintResults().exists()).toBe(true);
+    expect(findValidateBtn().props('loading')).toBe(false);
+  });
+
+  it('validation displays error', async () => {
+    mockMutate.mockRejectedValue('Error!');
+
+    findValidateBtn().vm.$emit('click');
+
+    await wrapper.vm.$nextTick();
+
+    expect(findValidateBtn().props('loading')).toBe(true);
+
+    await waitForPromises();
+
+    expect(findCiLintResults().exists()).toBe(false);
+    expect(findAlert().text()).toBe('Error!');
+    expect(findValidateBtn().props('loading')).toBe(false);
+  });
+
   it('content is cleared on clear action', async () => {
     expect(findEditor().props('value')).toBe(content);
 

spec/frontend/ci_lint/mock_data.js

@@ -81,3 +81,14 @@ export const mockErrors = [
 export const mockWarnings = [
   '"jobs:multi_project_job may allow multiple pipelines to run for a single action due to `rules:when` clause with no `workflow:rules` - read more: https://docs.gitlab.com/ee/ci/troubleshooting.html#pipeline-warnings"',
 ];
+
+export const mockLintDataValid = {
+  data: {
+    lintCI: {
+      errors: [],
+      warnings: [],
+      valid: true,
+      jobs: mockJobs,
+    },
+  },
+};