Add gitlab-ui skeleton loading

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

 <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>

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

 <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>

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

-<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>

app/assets/javascripts/notes.js

@@ -16,7 +16,7 @@ import 'vendor/jquery.atwho';
 import AjaxCache from '~/lib/utils/ajax_cache';
 import Vue from 'vue';
 import syntaxHighlight from '~/syntax_highlight';
-import SkeletonLoadingContainer from '~/vue_shared/components/skeleton_loading_container.vue';
+import SkeletonLoading from '@gitlab-org/gitlab-ui/dist/components/base/skeleton_loading';
 import axios from './lib/utils/axios_utils';
 import { getLocationHash } from './lib/utils/url_utility';
 import Flash from './flash';
@@ -1293,10 +1293,10 @@ export default class Notes {
     new Vue({
       el,
       components: {
-        SkeletonLoadingContainer,
+        SkeletonLoading,
       },
       render(createElement) {
-        return createElement('skeleton-loading-container');
+        return createElement('skeleton-loading');
       },
     });
   }

app/assets/javascripts/notes/components/diff_with_note.vue

@@ -3,13 +3,13 @@ import { mapState, mapActions } from 'vuex';
 import imageDiffHelper from '~/image_diff/helpers/index';
 import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
 import DiffFileHeader from '~/diffs/components/diff_file_header.vue';
-import SkeletonLoadingContainer from '~/vue_shared/components/skeleton_loading_container.vue';
+import SkeletonLoading from '@gitlab-org/gitlab-ui/dist/components/base/skeleton_loading';
 import { trimFirstCharOfLineContent } from '~/diffs/store/utils';
 export default {
   components: {
     DiffFileHeader,
-    SkeletonLoadingContainer,
+    SkeletonLoading,
   },
   props: {
     discussion: {
@@ -142,7 +142,7 @@ export default {
             class="line_content js-success-lazy-load"
           >
             <span></span>
-            <skeleton-loading-container />
+            <skeleton-loading />
             <span></span>
           </td>
         </tr>

app/assets/javascripts/vue_shared/components/content_viewer/viewers/markdown_viewer.vue

@@ -2,14 +2,14 @@
 import axios from '~/lib/utils/axios_utils';
 import { __ } from '~/locale';
 import $ from 'jquery';
-import SkeletonLoadingContainer from '~/vue_shared/components/skeleton_loading_container.vue';
+import SkeletonLoading from '@gitlab-org/gitlab-ui/dist/components/base/skeleton_loading';
 const { CancelToken } = axios;
 let axiosSource;
 export default {
   components: {
-    SkeletonLoadingContainer,
+    SkeletonLoading,
   },
   props: {
     content: {
@@ -81,7 +81,7 @@ export default {
   <div
     ref="markdown-preview"
     class="md md-previewer">
-    <skeleton-loading-container v-if="isLoading" />
+    <skeleton-loading v-if="isLoading" />
     <div
       v-else
       v-html="previewContent">

app/assets/javascripts/vue_shared/components/notes/skeleton_note.vue

+<script>
+import SkeletonLoading from '@gitlab-org/gitlab-ui/dist/components/base/skeleton_loading';
+
+export default {
+  name: 'SkeletonNote',
+  components: {
+    SkeletonLoading,
+  },
+};
+</script>
+
 <template>
   <li class="timeline-entry note">
     <div class="timeline-entry-inner">
@@ -6,20 +17,9 @@
       <div class="timeline-content">
         <div class="note-header"></div>
         <div class="note-body">
-          <skeleton-loading-container />
+          <skeleton-loading />
         </div>
       </div>
     </div>
   </li>
 </template>
-
-<script>
-import skeletonLoadingContainer from '~/vue_shared/components/skeleton_loading_container.vue';
-
-export default {
-  name: 'SkeletonNote',
-  components: {
-    skeletonLoadingContainer,
-  },
-};
-</script>

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

-<script>
-  export default {
-    props: {
-      small: {
-        type: Boolean,
-        required: false,
-        default: false,
-      },
-      lines: {
-        type: Number,
-        required: false,
-        default: 3,
-      },
-    },
-    computed: {
-      lineClasses() {
-        return new Array(this.lines).fill().map((_, i) => `skeleton-line-${i + 1}`);
-      },
-    },
-  };
-</script>
-
-<template>
-  <div
-    :class="{
-      'animation-container-small': small,
-    }"
-    class="animation-container"
-  >
-    <div
-      v-for="(css, index) in lineClasses"
-      :key="index"
-      :class="css"
-    >
-    </div>
-  </div>
-</template>

package.json

@@ -19,7 +19,7 @@
   },
   "dependencies": {
     "@gitlab-org/gitlab-svgs": "^1.29.0",
-    "@gitlab-org/gitlab-ui": "^1.5.1",
+    "@gitlab-org/gitlab-ui": "^1.7.0",
     "autosize": "^4.0.0",
     "axios": "^0.17.1",
     "babel-core": "^6.26.3",

spec/javascripts/ide/components/repo_loading_file_spec.js

-import Vue from 'vue';
-import store from '~/ide/stores';
-import repoLoadingFile from '~/ide/components/repo_loading_file.vue';
-import { resetStore } from '../helpers';
-
-describe('RepoLoadingFile', () => {
-  let vm;
-
-  function createComponent() {
-    const RepoLoadingFile = Vue.extend(repoLoadingFile);
-
-    return new RepoLoadingFile({
-      store,
-    }).$mount();
-  }
-
-  function assertLines(lines) {
-    lines.forEach((line, n) => {
-      const index = n + 1;
-      expect(line.classList.contains(`skeleton-line-${index}`)).toBeTruthy();
-    });
-  }
-
-  function assertColumns(columns) {
-    columns.forEach(column => {
-      const container = column.querySelector('.animation-container');
-      const lines = [...container.querySelectorAll(':scope > div')];
-
-      expect(container).toBeTruthy();
-      expect(lines.length).toEqual(3);
-      assertLines(lines);
-    });
-  }
-
-  afterEach(() => {
-    vm.$destroy();
-
-    resetStore(vm.$store);
-  });
-
-  it('renders 3 columns of animated LoC', () => {
-    vm = createComponent();
-    const columns = [...vm.$el.querySelectorAll('td')];
-
-    expect(columns.length).toEqual(3);
-    assertColumns(columns);
-  });
-
-  it('renders 1 column of animated LoC if isMini', done => {
-    vm = createComponent();
-    vm.$store.state.leftPanelCollapsed = true;
-    vm.$store.state.openFiles.push('test');
-
-    vm.$nextTick(() => {
-      const columns = [...vm.$el.querySelectorAll('td')];
-
-      expect(columns.length).toEqual(1);
-      assertColumns(columns);
-
-      done();
-    });
-  });
-});

spec/javascripts/vue_shared/components/skeleton_loading_container_spec.js

-import Vue from 'vue';
-import skeletonLoadingContainer from '~/vue_shared/components/skeleton_loading_container.vue';
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
-
-describe('Skeleton loading container', () => {
-  let vm;
-
-  beforeEach(() => {
-    const component = Vue.extend(skeletonLoadingContainer);
-    vm = mountComponent(component);
-  });
-
-  afterEach(() => {
-    vm.$destroy();
-  });
-
-  it('renders 3 skeleton lines by default', () => {
-    expect(vm.$el.querySelector('.skeleton-line-3')).not.toBeNull();
-  });
-
-  it('renders in full mode by default', () => {
-    expect(vm.$el.classList.contains('animation-container-small')).toBeFalsy();
-  });
-
-  describe('small', () => {
-    beforeEach((done) => {
-      vm.small = true;
-
-      Vue.nextTick(done);
-    });
-
-    it('renders in small mode', () => {
-      expect(vm.$el.classList.contains('animation-container-small')).toBeTruthy();
-    });
-  });
-
-  describe('lines', () => {
-    beforeEach((done) => {
-      vm.lines = 5;
-
-      Vue.nextTick(done);
-    });
-
-    it('renders 5 lines', () => {
-      expect(vm.$el.querySelector('.skeleton-line-5')).not.toBeNull();
-      expect(vm.$el.querySelector('.skeleton-line-6')).toBeNull();
-    });
-  });
-});

yarn.lock

@@ -164,9 +164,9 @@
   version "1.29.0"
   resolved "https://registry.yarnpkg.com/@gitlab-org/gitlab-svgs/-/gitlab-svgs-1.29.0.tgz#03b65b513f9099bbda6ecf94d673a2952f8c6c70"
-"@gitlab-org/gitlab-ui@^1.5.1":
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/@gitlab-org/gitlab-ui/-/gitlab-ui-1.5.1.tgz#82bc8583e24edfbaab5f1b6e88bf1a8056d7b528"
+"@gitlab-org/gitlab-ui@^1.7.0":
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/@gitlab-org/gitlab-ui/-/gitlab-ui-1.7.0.tgz#cf37b7262f90af42664d4d1600917271a8f8fb28"
   dependencies:
     "@gitlab-org/gitlab-svgs" "^1.23.0"
     bootstrap-vue "^2.0.0-rc.11"