Add loading buttonadd-shared-vue-loading-button

Encompasses designs from
 - https://gitlab.com/gitlab-org/gitlab-ce/issues/23206#note_43355199
 - https://gitlab.com/gitlab-org/gitlab-ce/issues/29985#note_30417407

1 files changed, 71 insertions, 0 deletions

diff --git a/app/assets/javascripts/vue_shared/components/loading_button.vue b/app/assets/javascripts/vue_shared/components/loading_button.vue
new file mode 100644
index 00000000000..6670b554faf
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/loading_button.vue
@@ -0,0 +1,71 @@
+<script>
+
+/* This is a re-usable vue component for rendering a button
+   that will probably be sending off ajax requests and need
+   to show the loading status by setting the `loading` option.
+   This can also be used for initial page load when you don't
+   know the action of the button yet by setting
+   `loading: true, label: undefined`.
+
+  Sample configuration:
+
+  <loading-button
+    :loading="true"
+    :label="Hello"
+    @click="..."
+  />
+
+*/
+
+import loadingIcon from './loading_icon.vue';
+
+export default {
+  props: {
+    loading: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    label: {
+      type: String,
+      required: false,
+    },
+  },
+  components: {
+    loadingIcon,
+  },
+  methods: {
+    onClick(e) {
+      this.$emit('click', e);
+    },
+  },
+};
+</script>
+
+<template>
+  <button
+    class="btn btn-align-content"
+    @click="onClick"
+    type="button"
+    :disabled="loading"
+  >
+      <transition name="fade">
+        <loading-icon
+          v-if="loading"
+          :inline="true"
+          class="js-loading-button-icon"
+          :class="{
+              'append-right-5': label
+          }"
+        />
+      </transition>
+      <transition name="fade">
+        <span
+          v-if="label"
+          class="js-loading-button-label"
+        >
+          {{ label }}
+        </span>
+      </transition>
+  </button>
+</template>