Skip to content

G
gitlab-ce
Commit 2a6cd526 authored by Clement Ho's avatar Clement Ho Committed by Mike Greiling
Browse files
Options

Add gitlab-ui skeleton loading

parent 53e012a9
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 @ 2a6cd526
<script> <script>
import { mapState, mapGetters } from 'vuex'; 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 IdeTree from './ide_tree.vue';
import ResizablePanel from './resizable_panel.vue'; import ResizablePanel from './resizable_panel.vue';
import ActivityBar from './activity_bar.vue'; import ActivityBar from './activity_bar.vue';
...@@ -13,7 +13,7 @@ import { activityBarViews } from '../constants'; ...@@ -13,7 +13,7 @@ import { activityBarViews } from '../constants';
export default { export default {
components: { components: {
SkeletonLoadingContainer, SkeletonLoading,
ResizablePanel, ResizablePanel,
ActivityBar, ActivityBar,
CommitSection, CommitSection,
...@@ -56,7 +56,7 @@ export default { ...@@ -56,7 +56,7 @@ export default {
:key="n" :key="n"
class="multi-file-loading-container" class="multi-file-loading-container"
> >
<skeleton-loading-container /> <skeleton-loading />
</div> </div>
</div> </div>
</template> </template>
......
app/assets/javascripts/ide/components/ide_tree_list.vue
View file @ 2a6cd526
<script> <script>
import { mapActions, mapGetters, mapState } from 'vuex'; import { mapActions, mapGetters, mapState } from 'vuex';
import Icon from '~/vue_shared/components/icon.vue'; 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 FileRow from '~/vue_shared/components/file_row.vue';
import NavDropdown from './nav_dropdown.vue'; import NavDropdown from './nav_dropdown.vue';
import FileRowExtra from './file_row_extra.vue'; import FileRowExtra from './file_row_extra.vue';
...@@ -9,7 +9,7 @@ import FileRowExtra from './file_row_extra.vue'; ...@@ -9,7 +9,7 @@ import FileRowExtra from './file_row_extra.vue';
export default { export default {
components: { components: {
Icon, Icon,
SkeletonLoadingContainer, SkeletonLoading,
NavDropdown, NavDropdown,
FileRow, FileRow,
}, },
...@@ -51,7 +51,7 @@ export default { ...@@ -51,7 +51,7 @@ export default {
:key="n" :key="n"
class="multi-file-loading-container" class="multi-file-loading-container"
> >
<skeleton-loading-container /> <skeleton-loading />
</div> </div>
</template> </template>
<template v-else> <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 @ 2a6cd526
...@@ -16,7 +16,7 @@ import 'vendor/jquery.atwho'; ...@@ -16,7 +16,7 @@ import 'vendor/jquery.atwho';
import AjaxCache from '~/lib/utils/ajax_cache'; import AjaxCache from '~/lib/utils/ajax_cache';
import Vue from 'vue'; import Vue from 'vue';
import syntaxHighlight from '~/syntax_highlight'; 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 axios from './lib/utils/axios_utils';
import { getLocationHash } from './lib/utils/url_utility'; import { getLocationHash } from './lib/utils/url_utility';
import Flash from './flash'; import Flash from './flash';
...@@ -1293,10 +1293,10 @@ export default class Notes { ...@@ -1293,10 +1293,10 @@ export default class Notes {
new Vue({ new Vue({
el, el,
components: { components: {
SkeletonLoadingContainer, SkeletonLoading,
}, },
render(createElement) { render(createElement) {
return createElement('skeleton-loading-container'); return createElement('skeleton-loading');
}, },
}); });
} }
......
app/assets/javascripts/notes/components/diff_with_note.vue
View file @ 2a6cd526
...@@ -3,13 +3,13 @@ import { mapState, mapActions } from 'vuex'; ...@@ -3,13 +3,13 @@ import { mapState, mapActions } from 'vuex';
import imageDiffHelper from '~/image_diff/helpers/index'; import imageDiffHelper from '~/image_diff/helpers/index';
import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils'; import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
import DiffFileHeader from '~/diffs/components/diff_file_header.vue'; 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'; import { trimFirstCharOfLineContent } from '~/diffs/store/utils';
export default { export default {
components: { components: {
DiffFileHeader, DiffFileHeader,
SkeletonLoadingContainer, SkeletonLoading,
}, },
props: { props: {
discussion: { discussion: {
...@@ -142,7 +142,7 @@ export default { ...@@ -142,7 +142,7 @@ export default {
class="line_content js-success-lazy-load" class="line_content js-success-lazy-load"
> >
<span></span> <span></span>
<skeleton-loading-container /> <skeleton-loading />
<span></span> <span></span>
</td> </td>
</tr> </tr>
......
app/assets/javascripts/vue_shared/components/content_viewer/viewers/markdown_viewer.vue
View file @ 2a6cd526
...@@ -2,14 +2,14 @@ ...@@ -2,14 +2,14 @@
import axios from '~/lib/utils/axios_utils'; import axios from '~/lib/utils/axios_utils';
import { __ } from '~/locale'; import { __ } from '~/locale';
import $ from 'jquery'; 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; const { CancelToken } = axios;
let axiosSource; let axiosSource;
export default { export default {
components: { components: {
SkeletonLoadingContainer, SkeletonLoading,
}, },
props: { props: {
content: { content: {
...@@ -81,7 +81,7 @@ export default { ...@@ -81,7 +81,7 @@ export default {
<div <div
ref="markdown-preview" ref="markdown-preview"
class="md md-previewer"> class="md md-previewer">
<skeleton-loading-container v-if="isLoading" /> <skeleton-loading v-if="isLoading" />
<div <div
v-else v-else
v-html="previewContent"> v-html="previewContent">
......
app/assets/javascripts/vue_shared/components/notes/skeleton_note.vue
View file @ 2a6cd526
<script>
import SkeletonLoading from '@gitlab-org/gitlab-ui/dist/components/base/skeleton_loading';
export default {
name: 'SkeletonNote',
components: {
SkeletonLoading,
},
};
</script>
<template> <template>
<li class="timeline-entry note"> <li class="timeline-entry note">
<div class="timeline-entry-inner"> <div class="timeline-entry-inner">
...@@ -6,20 +17,9 @@ ...@@ -6,20 +17,9 @@
<div class="timeline-content"> <div class="timeline-content">
<div class="note-header"></div> <div class="note-header"></div>
<div class="note-body"> <div class="note-body">
<skeleton-loading-container /> <skeleton-loading />
</div> </div>
</div> </div>
</div> </div>
</li> </li>
</template> </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>
package.json
View file @ 2a6cd526
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
}, },
"dependencies": { "dependencies": {
"@gitlab-org/gitlab-svgs": "^1.29.0", "@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", "autosize": "^4.0.0",
"axios": "^0.17.1", "axios": "^0.17.1",
"babel-core": "^6.26.3", "babel-core": "^6.26.3",
......
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 @ 2a6cd526
...@@ -164,9 +164,9 @@ ...@@ -164,9 +164,9 @@
version "1.29.0" version "1.29.0"
resolved "https://registry.yarnpkg.com/@gitlab-org/gitlab-svgs/-/gitlab-svgs-1.29.0.tgz#03b65b513f9099bbda6ecf94d673a2952f8c6c70" resolved "https://registry.yarnpkg.com/@gitlab-org/gitlab-svgs/-/gitlab-svgs-1.29.0.tgz#03b65b513f9099bbda6ecf94d673a2952f8c6c70"
"@gitlab-org/gitlab-ui@^1.5.1": "@gitlab-org/gitlab-ui@^1.7.0":
version "1.5.1" version "1.7.0"
resolved "https://registry.yarnpkg.com/@gitlab-org/gitlab-ui/-/gitlab-ui-1.5.1.tgz#82bc8583e24edfbaab5f1b6e88bf1a8056d7b528" resolved "https://registry.yarnpkg.com/@gitlab-org/gitlab-ui/-/gitlab-ui-1.7.0.tgz#cf37b7262f90af42664d4d1600917271a8f8fb28"
dependencies: dependencies:
"@gitlab-org/gitlab-svgs" "^1.23.0" "@gitlab-org/gitlab-svgs" "^1.23.0"
bootstrap-vue "^2.0.0-rc.11" 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