[ICIJ/datashare#349] Avoid reload of the page on loading more named e…

…ntities of a document
ICIJ · Mar 10, 2020 · f467b0f · f467b0f
1 parent 1e7db23
commit f467b0f
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 10 deletions.
diff --git a/src/components/document/DocumentTabNamedEntities.vue b/src/components/document/DocumentTabNamedEntities.vue
@@ -30,11 +30,14 @@
               </b-popover>
             </span>
           </span>
-          <div v-if="categoryHasNextPage(category)">
-            <a class="document__named-entities__more small" href="#" @click.prevent="getNextPageInCategory(category)">
-              {{ $t('document.namedEntities.showMore' + capitalize(category)) }}
-            </a>
-          </div>
+          <v-wait :for="`load_more_data_${category}`">
+            <fa icon="circle-notch" spin size="2x" class="d-flex mx-auto mt-5" slot="waiting" />
+            <div v-if="categoryHasNextPage(category)">
+              <a class="document__named-entities__more small" href="#" @click.prevent="getNextPageInCategory(category)">
+                {{ $t('document.namedEntities.showMore' + capitalize(category)) }}
+              </a>
+            </div>
+          </v-wait>
         </div>
       </div>
     </div>
@@ -86,10 +89,12 @@ export default {
     categoryHasNextPage (category) {
       return this.getCategoryTotal(category) > this.$store.getters['document/countNamedEntitiesInCategory'](category)
     },
-    getNextPageInCategory (category) {
+    async getNextPageInCategory (category) {
       // Don't load named entities if they are already loading
       if (!this.isLoadingNamedEntities) {
-        return this.$store.dispatch('document/getNextPageForNamedEntityInCategory', category)
+        this.$wait.start('load_more_data_' + category)
+        await this.$store.dispatch('document/getNextPageForNamedEntityInCategory', category)
+        this.$wait.end('load_more_data_' + category)
       }
     },
     capitalize

diff --git a/src/store/modules/document.js b/src/store/modules/document.js
@@ -165,9 +165,7 @@ export const actions = {
       const from = getters.countNamedEntitiesInCategory(category)
       const index = state.doc.index
       const { id, routing } = state.idAndRouting
-      const raw = await dispatch('loadingNamedEntities', () => {
-        return elasticsearch.getDocumentNamedEntitiesInCategory(index, id, routing, from, 50, category)
-      })
+      const raw = await elasticsearch.getDocumentNamedEntitiesInCategory(index, id, routing, from, 50, category)
       const page = new EsDocList(raw)
       commit('namedEntitiesPageInCategory', { category, page })
       return page