kotovalexarian-likes-gitlab/gitlab-org--gitlab-foss
1
0
Fork 0
Code Releases Activity

Add gitlab-ui skeleton loading

Browse source
This commit is contained in:
Clement Ho 2018-09-25 20:03:40 +00:00 committed by Mike Greiling
parent 53e012a9c5
commit 2a6cd526ac
12 changed files with 31 additions and 222 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
app/assets/javascripts/ide/components/ide_side_bar.vue
View file

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

6
app/assets/javascripts/ide/components/ide_tree_list.vue
View file

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

42
app/assets/javascripts/ide/components/repo_loading_file.vue
View file

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

6
app/assets/javascripts/notes.js
View file

@ -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');
},
});
}

6
app/assets/javascripts/notes/components/diff_with_note.vue
View file

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

6
app/assets/javascripts/vue_shared/components/content_viewer/viewers/markdown_viewer.vue
View file

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

24
app/assets/javascripts/vue_shared/components/notes/skeleton_note.vue
View file

@ -1,3 +1,14 @@
<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>

37
app/assets/javascripts/vue_shared/components/skeleton_loading_container.vue
View file

@ -1,37 +0,0 @@
<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>

2
package.json
View file

@ -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",

63
spec/javascripts/ide/components/repo_loading_file_spec.js
View file

@ -1,63 +0,0 @@
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();
});
});
});

49
spec/javascripts/vue_shared/components/skeleton_loading_container_spec.js
View file

@ -1,49 +0,0 @@
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();
});
});
});

6
yarn.lock
View file

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