feat: implementation of loading in annotation panel

src/App.vue

@@ -21,7 +21,7 @@
     <q-page-container class="root">
       <router-view
         :annotations="annotations"
-        :annotation-loading="annotationLoading"
+        :annotation-loaded="annotationLoaded"
         :collection="collection"
         :config="config"
         :contenttypes="contentTypes"
@@ -54,7 +54,7 @@ export default {
   data() {
     return {
       annotations: [],
-      annotationLoading: false,
+      annotationLoaded: false,
       collection: {},
       collectiontitle: '',
       config: {},
@@ -143,7 +143,7 @@ export default {
       */
     async getAnnotations(url) {
       this.annotations = [];
-      this.annotationLoading = false;
+      this.annotationLoaded = false;
 
       try {
         const annotations = await this.request(url);
@@ -163,7 +163,7 @@ export default {
       } catch (err) {
         this.annotations = [];
       } finally {
-        this.annotationLoading = true;
+        this.annotationLoaded = true;
       }
     },
     /**

src/components/annotations/annotations.vue

 <template>
-  <div class="item">
+  <div class="item relative-position">
     <q-tabs
       v-model="currentTab"
       active-color="$q.dark.isActive ? 'white' : 'accent'"
@@ -19,8 +19,13 @@
 
     <AnnotationToggles />
 
+    <LoadingProgress
+      v-if="!annotationLoaded || isProcessing"
+      :loadingprogress="!annotationLoaded || isProcessing"
+    />
+
     <AnnotationList
-      v-if="currentAnnotations.length"
+      v-else-if="currentAnnotations.length && annotationLoaded && !isProcessing"
       class="custom-font"
       :configured-annotations="currentAnnotations"
       :get-icon="getIcon"
@@ -29,7 +34,7 @@
     />
 
     <div
-      v-else
+      v-else-if="annotationLoaded && !currentAnnotations.length && !isProcessing"
       class="q-pa-sm"
     >
       <Notification
@@ -57,6 +62,7 @@ import AnnotationToggles from '@/components/annotations/toggles.vue';
 import AnnotationList from '@/components/annotations/list.vue';
 import AnnotationOptions from '@/components/annotations/options.vue';
 
+import LoadingProgress from '@/components/loading.vue';
 import Notification from '@/components/notification.vue';
 
 export default {
@@ -65,6 +71,7 @@ export default {
     AnnotationToggles,
     AnnotationList,
     AnnotationOptions,
+    LoadingProgress,
     Notification,
   },
   mixins: [Annotation],
@@ -73,7 +80,7 @@ export default {
       type: Array,
       default: () => [],
     },
-    annotationLoading: {
+    annotationLoaded: {
       type: Boolean,
       default: false,
     },
@@ -85,13 +92,14 @@ export default {
   data() {
     return {
       configuredAnnotations: [],
+      currentTab: '',
       ids: [],
+      isProcessing: false,
       messages: {
         none: 'noAnnotationMessage',
       },
       selectedAll: false,
       selectedNone: true,
-      currentTab: '',
     };
   },
   computed: {
@@ -139,14 +147,17 @@ export default {
     },
   },
   mounted() {
-    this.$root.$on('update-annotations', (content) => {
+    this.$root.$on('update-annotations', (content, isProcessing) => {
+      this.isProcessing = !!isProcessing;
+
       const parser = new DOMParser();
       const doc = parser.parseFromString(content, 'text/html');
 
       this.ids = [...doc.body.querySelectorAll('[id]')].map((el) => el.getAttribute('id'));
+      this.configuredAnnotations = [];
 
       const interval = setInterval(() => {
-        if (this.annotationLoading) {
+        if (this.annotationLoaded) {
           this.configuredAnnotations = this.filterAnnotationTypes();
 
           const firstTab = this.annotationTabs.find((x) => x.type.length)?.key || '';
@@ -155,7 +166,7 @@ export default {
           this.currentTab = firstTab;
           clearInterval(interval);
         }
-      }, 500);
+      }, 50);
     });
   },
   methods: {

src/components/content.vue

@@ -121,6 +121,8 @@ export default {
       this.$refs.contentsize.style.fontSize = `${this.fontsize}px`;
     },
     async activeTab(url) {
+      this.$root.$emit('update-annotations', [], true);
+
       const data = await this.request(url, 'text');
 
       if (this.supportType) {
@@ -129,7 +131,7 @@ export default {
 
       this.content = data;
 
-      this.$root.$emit('update-annotations', data);
+      this.$root.$emit('update-annotations', data, false);
     },
   },
   async created() {

src/components/loading.vue

+<template>
+  <q-inner-loading
+    :showing="loadingprogress"
+  >
+    <q-spinner
+      size="3em"
+      color="primary"
+    />
+  </q-inner-loading>
+</template>
+
+<script>
+
+export default {
+  name: 'LoadingProgress',
+  props: {
+    loadingprogress: {
+      type: Boolean,
+    },
+    textcontentprogress: {
+      type: Boolean,
+    },
+  },
+  data: () => ({
+
+  }),
+};
+</script>

src/index.template.html

@@ -31,7 +31,7 @@
     -->
     <script id="tido-config" type="application/json">
     {
-			"entrypoint": "",
+			"entrypoint": "https://ahikar-dev.sub.uni-goettingen.de/api/textapi/ahikar/arabic-karshuni/collection.json",
       "annotations": {
         "show": true,
         "types": [

src/views/mainview.vue

@@ -85,7 +85,7 @@ export default {
       type: Array,
       default: () => [],
     },
-    annotationLoading: {
+    annotationLoaded: {
       type: Boolean,
       default: false,
     },
@@ -121,6 +121,9 @@ export default {
       type: Object,
       default: () => {},
     },
+    loadingprogress: {
+      type: Boolean,
+    },
     manifests: {
       type: Array,
       default: () => [],