diff options
Diffstat (limited to 'app/assets/javascripts/snippets/components/app.vue')
-rw-r--r-- | app/assets/javascripts/snippets/components/app.vue | 29 |
1 files changed, 24 insertions, 5 deletions
diff --git a/app/assets/javascripts/snippets/components/app.vue b/app/assets/javascripts/snippets/components/app.vue index e3d6cdd4606..bd2cb8e4595 100644 --- a/app/assets/javascripts/snippets/components/app.vue +++ b/app/assets/javascripts/snippets/components/app.vue @@ -1,10 +1,16 @@ <script> -import getSnippet from '../queries/getSnippet.query.graphql'; +import GetSnippetQuery from '../queries/snippet.query.graphql'; +import SnippetHeader from './snippet_header.vue'; +import { GlLoadingIcon } from '@gitlab/ui'; export default { + components: { + SnippetHeader, + GlLoadingIcon, + }, apollo: { - snippetData: { - query: getSnippet, + snippet: { + query: GetSnippetQuery, variables() { return { ids: this.snippetGid, @@ -21,11 +27,24 @@ export default { }, data() { return { - snippetData: {}, + snippet: {}, }; }, + computed: { + isLoading() { + return this.$apollo.queries.snippet.loading; + }, + }, }; </script> <template> - <div class="js-snippet-view"></div> + <div class="js-snippet-view"> + <gl-loading-icon + v-if="isLoading" + :label="__('Loading snippet')" + :size="2" + class="loading-animation prepend-top-20 append-bottom-20" + /> + <snippet-header v-else :snippet="snippet" /> + </div> </template> |