Skip to content

G
gitlab-ce
Commit 336cc5e7 authored by Mike Greiling's avatar Mike Greiling
Browse files
Options

Merge branch 'add-gitlab-ui-skeleton-loading' into 'master' 

Add gitlab-ui skeleton loading

See merge request gitlab-org/gitlab-ce!21871
parents 53e012a9 2a6cd526
Show whitespace changes
Inline Side-by-side
Showing with 31 additions and 222 deletions
app/assets/javascripts/ide/components/ide_side_bar.vue
View file @ 336cc5e7
<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
View file @ 336cc5e7
<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 deleted 100644 → 0
View file @ 53e012a9
<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
View file @ 336cc5e7
......@@ -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
View file @ 336cc5e7
......@@ -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
View file @ 336cc5e7
......@@ -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
View file @ 336cc5e7
<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 deleted 100644 → 0
View file @ 53e012a9
<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>
spec/javascripts/ide/components/repo_loading_file_spec.js deleted 100644 → 0
View file @ 53e012a9
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 deleted 100644 → 0
View file @ 53e012a9
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
View file @ 336cc5e7
......@@ -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"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7