Add gitlab-ui skeleton loading

3 files changed, 6 insertions, 48 deletions

diff --git a/app/assets/javascripts/ide/components/ide_side_bar.vue b/app/assets/javascripts/ide/components/ide_side_bar.vue
index 4771c58a11d..5620d6a6244 100644
--- a/app/assets/javascripts/ide/components/ide_side_bar.vue
+++ b/app/assets/javascripts/ide/components/ide_side_bar.vue
@@ -1,6 +1,6 @@
 <script>
 import { mapState, mapGetters } from 'vuex';
-import SkeletonLoadingContainer from '~/vue_shared/components/skeleton_loading_container.vue';
+import SkeletonLoading from '@gitlab-org/gitlab-ui/dist/components/base/skeleton_loading';
 import IdeTree from './ide_tree.vue';
 import ResizablePanel from './resizable_panel.vue';
 import ActivityBar from './activity_bar.vue';
@@ -13,7 +13,7 @@ import { activityBarViews } from '../constants';
 
 export default {
   components: {
-    SkeletonLoadingContainer,
+    SkeletonLoading,
     ResizablePanel,
     ActivityBar,
     CommitSection,
@@ -56,7 +56,7 @@ export default {
           :key="n"
           class="multi-file-loading-container"
         >
-          <skeleton-loading-container />
+          <skeleton-loading />
         </div>
       </div>
     </template>
diff --git a/app/assets/javascripts/ide/components/ide_tree_list.vue b/app/assets/javascripts/ide/components/ide_tree_list.vue
index e658d1bf956..ff53314d275 100644
--- a/app/assets/javascripts/ide/components/ide_tree_list.vue
+++ b/app/assets/javascripts/ide/components/ide_tree_list.vue
@@ -1,7 +1,7 @@
 <script>
 import { mapActions, mapGetters, mapState } from 'vuex';
 import Icon from '~/vue_shared/components/icon.vue';
-import SkeletonLoadingContainer from '~/vue_shared/components/skeleton_loading_container.vue';
+import SkeletonLoading from '@gitlab-org/gitlab-ui/dist/components/base/skeleton_loading';
 import FileRow from '~/vue_shared/components/file_row.vue';
 import NavDropdown from './nav_dropdown.vue';
 import FileRowExtra from './file_row_extra.vue';
@@ -9,7 +9,7 @@ import FileRowExtra from './file_row_extra.vue';
 export default {
   components: {
     Icon,
-    SkeletonLoadingContainer,
+    SkeletonLoading,
     NavDropdown,
     FileRow,
   },
@@ -51,7 +51,7 @@ export default {
         :key="n"
         class="multi-file-loading-container"
       >
-        <skeleton-loading-container />
+        <skeleton-loading />
       </div>
     </template>
     <template v-else>
diff --git a/app/assets/javascripts/ide/components/repo_loading_file.vue b/app/assets/javascripts/ide/components/repo_loading_file.vue
deleted file mode 100644
index 7a5ede82253..00000000000
--- a/app/assets/javascripts/ide/components/repo_loading_file.vue
+++ /dev/null
@@ -1,42 +0,0 @@
-<script>
-  import { mapState } from 'vuex';
-  import skeletonLoadingContainer from '~/vue_shared/components/skeleton_loading_container.vue';
-
-  export default {
-    components: {
-      skeletonLoadingContainer,
-    },
-    computed: {
-      ...mapState([
-        'leftPanelCollapsed',
-      ]),
-    },
-  };
-</script>
-
-<template>
-  <tr
-    class="loading-file"
-    aria-label="Loading files"
-  >
-    <td class="multi-file-table-col-name">
-      <skeleton-loading-container
-        :small="true"
-      />
-    </td>
-    <template v-if="!leftPanelCollapsed">
-      <td class="d-none d-sm-none d-md-block">
-        <skeleton-loading-container
-          :small="true"
-        />
-      </td>
-
-      <td class="d-none d-sm-block">
-        <skeleton-loading-container
-          :small="true"
-          class="animation-container-right"
-        />
-      </td>
-    </template>
-  </tr>
-</template>