Backport inline loading_icon updates from EEbackport-inline-loading-icon

See
https://gitlab.com/gitlab-org/gitlab-ee/merge_requests/2246#note_33577729

1 files changed, 13 insertions, 2 deletions

diff --git a/app/assets/javascripts/vue_shared/components/loading_icon.vue b/app/assets/javascripts/vue_shared/components/loading_icon.vue
index 41b1d0165b0..15581d5c2a0 100644
--- a/app/assets/javascripts/vue_shared/components/loading_icon.vue
+++ b/app/assets/javascripts/vue_shared/components/loading_icon.vue
@@ -12,9 +12,18 @@
         required: false,
         default: '1',
       },
+
+      inline: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
     },
 
     computed: {
+      rootElementType() {
+        return this.inline ? 'span' : 'div';
+      },
       cssClass() {
         return `fa-${this.size}x`;
       },
@@ -22,12 +31,14 @@
   };
 </script>
 <template>
-  <div class="text-center">
+  <component
+    :is="this.rootElementType"
+    class="text-center">
     <i
       class="fa fa-spin fa-spinner"
       :class="cssClass"
       aria-hidden="true"
       :aria-label="label">
     </i>
-  </div>
+  </component>
 </template>