diff options
Diffstat (limited to 'app/assets/javascripts/repo/components/repo_loading_file.vue')
-rw-r--r-- | app/assets/javascripts/repo/components/repo_loading_file.vue | 51 |
1 files changed, 51 insertions, 0 deletions
diff --git a/app/assets/javascripts/repo/components/repo_loading_file.vue b/app/assets/javascripts/repo/components/repo_loading_file.vue new file mode 100644 index 00000000000..38e9f16d041 --- /dev/null +++ b/app/assets/javascripts/repo/components/repo_loading_file.vue @@ -0,0 +1,51 @@ +<script> +const RepoLoadingFile = { + props: { + loading: { + type: Object, + required: false, + default: {}, + }, + hasFiles: { + type: Boolean, + required: false, + default: false, + }, + isMini: { + type: Boolean, + required: false, + default: false, + }, + }, + + methods: { + lineOfCode(n) { + return `line-of-code-${n}`; + }, + }, +}; + +export default RepoLoadingFile; +</script> + +<template> +<tr v-if="loading.tree && !hasFiles" class="loading-file"> + <td> + <div class="animation-container animation-container-small"> + <div v-for="n in 6" :class="lineOfCode(n)" :key="n"></div> + </div> + </td> + + <td v-if="!isMini" class="hidden-sm hidden-xs"> + <div class="animation-container"> + <div v-for="n in 6" :class="lineOfCode(n)" :key="n"></div> + </div> + </td> + + <td v-if="!isMini" class="hidden-xs"> + <div class="animation-container animation-container-small"> + <div v-for="n in 6" :class="lineOfCode(n)" :key="n"></div> + </div> + </td> +</tr> +</template> |