From 508b63869fa257c5380a0e20faee85ce6dafddce Mon Sep 17 00:00:00 2001
From: Katrin Yordanova <katrin.yordanova@crust.tech>
Date: Thu, 15 Dec 2022 18:22:17 +0200
Subject: [PATCH] Show loading spinner before displaying page list

---
 .../web/compose/src/views/Admin/Pages/List.vue | 18 ++++++++++++++++++
 locale/en/corteza-webapp-compose/page.yaml     |  1 +
 2 files changed, 19 insertions(+)

diff --git a/client/web/compose/src/views/Admin/Pages/List.vue b/client/web/compose/src/views/Admin/Pages/List.vue
index 96fd33d19..02c5164a4 100644
--- a/client/web/compose/src/views/Admin/Pages/List.vue
+++ b/client/web/compose/src/views/Admin/Pages/List.vue
@@ -74,7 +74,20 @@
               </b-col>
             </b-row>
 
+            <div
+              v-if="processing"
+              class="text-center text-muted m-5"
+            >
+              <div>
+                <b-spinner
+                  class="align-middle m-2"
+                />
+              </div>
+              {{ $t('loading') }}
+            </div>
+
             <page-tree
+              v-else
               v-model="tree"
               :namespace="namespace"
               class="pb-2"
@@ -115,6 +128,7 @@ export default {
     return {
       tree: [],
       page: new compose.Page({ visible: true }),
+      processing: false,
     }
   },
 
@@ -128,10 +142,14 @@ export default {
     }),
 
     loadTree () {
+      this.processing = true
       const { namespaceID } = this.namespace
       this.$ComposeAPI.pageTree({ namespaceID }).then((tree) => {
         this.tree = tree.map(p => new compose.Page(p))
       }).catch(this.toastErrorHandler(this.$t('notification:page.loadFailed')))
+        .finally(() => {
+          this.processing = false
+        })
     },
 
     handleAddPageFormSubmit () {
diff --git a/locale/en/corteza-webapp-compose/page.yaml b/locale/en/corteza-webapp-compose/page.yaml
index 09dcf1dd0..e2b3d9eff 100644
--- a/locale/en/corteza-webapp-compose/page.yaml
+++ b/locale/en/corteza-webapp-compose/page.yaml
@@ -31,6 +31,7 @@ label:
   pageBuilder: Page builder
   permissions: Permissions
   saveAndClose: Save and close
+loading: Loading
 moduleEdit: Edit module
 navigation:
   page: Pages