Added Loading State

app/assets/javascripts/ide/components/repo_file.vue

@@ -28,17 +28,10 @@
       ...mapState([
         'leftPanelCollapsed',
       ]),
-      fileIcon() {
-        return {
-          'fa-spinner fa-spin': this.file.loading,
-          [this.file.icon]: !this.file.loading,
-          'fa-folder-open': !this.file.loading && this.file.opened,
-        };
-
-      },
       isSubmodule() {
         return this.file.type === 'submodule';
       },
+      },
       isTree() {
         return this.file.type === 'tree';
       },

app/assets/javascripts/vue_shared/components/file_icon.vue

 <script>
   import { getIconForFile, getIconForFolder } from './file_icon/file_icon_map.js';
+  import loadingIcon from '../../vue_shared/components/loading_icon.vue';
   /* This is a re-usable vue component for rendering a svg sprite
     icon
@@ -32,6 +33,12 @@
         default: false,
       },
+      loading: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
+
       size: {
         type: Number,
         required: false,
@@ -44,14 +51,10 @@
         default: '',
       },
-
-      cssClasses: {
-        type: String,
-        required: false,
-        default: '',
-      },
     },
-
+    components: {
+      loadingIcon,
+    },
     computed: {
       spriteHref() {
         let iconName;
@@ -70,9 +73,16 @@
   };
 </script>
 <template>
-  <svg
-    :class="[iconSizeClass, cssClasses]">
-    <use 
-      v-bind="{'xlink:href':spriteHref}"/>
-  </svg>
+  <span>
+    <svg
+      :class="[iconSizeClass, cssClasses]"
+      v-if="!loading">
+      <use 
+        v-bind="{'xlink:href':spriteHref}"/>
+    </svg>
+    <loading-icon
+      v-if="loading"
+      :inline="true"
+    />
+  </span>
 </template>