diff options
Diffstat (limited to 'app/assets/javascripts/content_editor/components/loading_indicator.vue')
-rw-r--r-- | app/assets/javascripts/content_editor/components/loading_indicator.vue | 39 |
1 files changed, 39 insertions, 0 deletions
diff --git a/app/assets/javascripts/content_editor/components/loading_indicator.vue b/app/assets/javascripts/content_editor/components/loading_indicator.vue new file mode 100644 index 00000000000..5b9383d6e11 --- /dev/null +++ b/app/assets/javascripts/content_editor/components/loading_indicator.vue @@ -0,0 +1,39 @@ +<script> +import { GlLoadingIcon } from '@gitlab/ui'; +import EditorStateObserver from './editor_state_observer.vue'; + +export default { + components: { + GlLoadingIcon, + EditorStateObserver, + }, + data() { + return { + isLoading: false, + }; + }, + methods: { + displayLoadingIndicator() { + this.isLoading = true; + }, + hideLoadingIndicator() { + this.isLoading = false; + }, + }, +}; +</script> +<template> + <editor-state-observer + @loading="displayLoadingIndicator" + @loadingSuccess="hideLoadingIndicator" + @loadingError="hideLoadingIndicator" + > + <div + v-if="isLoading" + class="gl-w-full gl-display-flex gl-justify-content-center gl-align-items-center gl-absolute gl-top-0 gl-bottom-0" + > + <div class="gl-bg-white gl-absolute gl-w-full gl-h-full gl-opacity-3"></div> + <gl-loading-icon size="md" /> + </div> + </editor-state-observer> +</template> |