summaryrefslogtreecommitdiff
path: root/app/assets/javascripts/content_editor/components/loading_indicator.vue
blob: 620324adb064169f0e0f096bd982e9ef6700293c (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<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"
      data-testid="content-editor-loading-indicator"
      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>