diff options
| -rw-r--r-- | app/assets/javascripts/ide/components/repo_file.vue | 9 | ||||
| -rw-r--r-- | app/assets/javascripts/vue_shared/components/file_icon.vue | 34 |
2 files changed, 23 insertions, 20 deletions
diff --git a/app/assets/javascripts/ide/components/repo_file.vue b/app/assets/javascripts/ide/components/repo_file.vue index bca45b82990..2521ece032e 100644 --- a/app/assets/javascripts/ide/components/repo_file.vue +++ b/app/assets/javascripts/ide/components/repo_file.vue @@ -32,17 +32,10 @@ ...mapState([ 'leftBarCollapsed', ]), - fileIcon() { - return { - 'fa-spinner fa-spin': this.file.loading, - [this.file.icon]: !this.file.loading, - 'fa-folder-open': !this.file.loading && this.file.opened, - }; - - }, isSubmodule() { return this.file.type === 'submodule'; }, + }, isTree() { return this.file.type === 'tree'; }, diff --git a/app/assets/javascripts/vue_shared/components/file_icon.vue b/app/assets/javascripts/vue_shared/components/file_icon.vue index 4459d22dc0f..a9a6e95340f 100644 --- a/app/assets/javascripts/vue_shared/components/file_icon.vue +++ b/app/assets/javascripts/vue_shared/components/file_icon.vue @@ -1,5 +1,6 @@ <script> import { getIconForFile, getIconForFolder } from './file_icon/file_icon_map.js'; + import loadingIcon from '../../vue_shared/components/loading_icon.vue'; /* This is a re-usable vue component for rendering a svg sprite icon @@ -32,6 +33,12 @@ default: false, }, + loading: { + type: Boolean, + required: false, + default: false, + }, + size: { type: Number, required: false, @@ -44,14 +51,10 @@ default: '', }, - - cssClasses: { - type: String, - required: false, - default: '', - }, }, - + components: { + loadingIcon, + }, computed: { spriteHref() { let iconName; @@ -70,9 +73,16 @@ }; </script> <template> - <svg - :class="[iconSizeClass, cssClasses]"> - <use - v-bind="{'xlink:href':spriteHref}"/> - </svg> + <span> + <svg + :class="[iconSizeClass, cssClasses]" + v-if="!loading"> + <use + v-bind="{'xlink:href':spriteHref}"/> + </svg> + <loading-icon + v-if="loading" + :inline="true" + /> + </span> </template> |