Show loading spinner before displaying page list

cortezaproject · Dec 19, 2022 · c47188d · c47188d
1 parent 6124ffa
commit c47188d
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 0 deletions.
diff --git 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
+              class="text-center text-muted m-5"
+              v-if="processing"
+            >
+              <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
@@ -31,6 +31,7 @@ label:
   pageBuilder: Page builder
   permissions: Permissions
   saveAndClose: Save and close
+loading: Loading
 moduleEdit: Edit module
 navigation:
   page: Pages