Add UI/UX improvements

client/web/compose/src/views/Admin/Charts/Edit.vue

@@ -303,7 +303,7 @@
         :hide-save="hideSave"
         hide-clone
         :disable-save="disableSave"
-        @delete="handleDelete"
+        @delete="handleDelete()"
         @save="handleSave()"
         @saveAndClose="handleSave({ closeOnSuccess: true })"
       />

client/web/compose/src/views/Admin/Modules/List.vue

@@ -109,6 +109,7 @@
         <related-pages
           :namespace="namespace"
           :module="m"
+          size="sm"
         />
 
         <b-button-group

client/web/compose/src/views/Admin/Pages/Edit.vue

@@ -1,6 +1,5 @@
 <template>
   <div
-    v-if="page"
     class="py-3"
   >
     <portal to="topbar-title">
@@ -26,7 +25,6 @@
         </b-button>
 
         <page-translator
-          v-if="page"
           :page.sync="page"
           :page-layouts.sync="layouts"
           style="margin-left:2px;"
@@ -46,7 +44,17 @@
       </b-button-group>
     </portal>
 
-    <b-container fluid="xl">
+    <div
+      v-if="processing"
+      class="d-flex align-items-center justify-content-center h-100"
+    >
+      <b-spinner />
+    </div>
+
+    <b-container
+      v-else
+      fluid="xl"
+    >
       <div
         class="d-flex align-items-center mt-1 mb-2"
       >
@@ -706,7 +714,7 @@
       <editor-toolbar
         :back-link="{ name: 'admin.pages' }"
         :hide-delete="hideDelete"
-        :hide-save="!page.canUpdatePage"
+        :hide-save="hideSave"
         :disable-save="disableSave"
         :processing="processing"
         @clone="handleClone()"
@@ -840,11 +848,15 @@ export default {
     },
 
     disableSave () {
-      return [this.titleState, this.handleState].includes(false) || this.layouts.some(l => !l.meta.title || handle.handleState(l.handle) === false)
+      return !this.page || [this.titleState, this.handleState].includes(false) || this.layouts.some(l => !l.meta.title || handle.handleState(l.handle) === false)
     },
 
     hideDelete () {
-      return this.hasChildren || !this.page.canDeletePage || !!this.page.deletedAt
+      return !this.page || this.hasChildren || !this.page.canDeletePage || !!this.page.deletedAt
+    },
+
+    hideSave () {
+      return !this.page || !this.page.canUpdatePage
     },
 
     showDeleteDropdown () {
@@ -936,7 +948,7 @@ export default {
           this.processing = true
 
           const { namespaceID } = this.namespace
-          this.findPageByID({ namespaceID, pageID }).then((page) => {
+          this.findPageByID({ namespaceID, pageID, force: true }).then((page) => {
             this.page = page.clone()
             return this.fetchAttachments()
           }).then(this.fetchLayouts)

client/web/compose/src/views/Public/Pages/Records/View.vue

@@ -17,8 +17,15 @@
       {{ title }}
     </portal>
 
+    <div
+      v-if="!layout"
+      class="d-flex align-items-center justify-content-center h-100"
+    >
+      <b-spinner />
+    </div>
+
     <grid
-      v-if="blocks"
+      v-else-if="blocks"
       v-bind="$props"
       :errors="errors"
       :record="record"
@@ -380,7 +387,12 @@ export default {
     },
 
     async determineLayout (pageLayoutID) {
-      const expressions = await this.evaluateLayoutExpressions()
+      let expressions = {}
+
+      // Only evaluate if one of the layouts has an expressions variable
+      if (this.layouts.some(({ config = {} }) => config.visibility.expression)) {
+        expressions = await this.evaluateLayoutExpressions()
+      }
 
       // Check layouts for expressions/roles and find the first one that fits
       this.layout = this.layouts.find(l => {

client/web/compose/src/views/Public/Pages/View.vue

@@ -58,6 +58,13 @@
         class="flex-grow-1 overflow-auto d-flex flex-column"
       />
 
+      <div
+        v-else-if="!layout"
+        class="d-flex align-items-center justify-content-center w-100"
+      >
+        <b-spinner />
+      </div>
+
       <grid
         v-else-if="blocks"
         :namespace="namespace"
@@ -238,7 +245,13 @@ export default {
     async determineLayout () {
       this.layouts = this.getPageLayouts(this.page.pageID)
 
-      const expressions = await this.evaluateLayoutExpressions()
+      let expressions = {}
+
+      // Only evaluate if one of the layouts has an expressions variable
+      if (this.layouts.some(({ config = {} }) => config.visibility.expression)) {
+        this.pageTitle = this.page.title
+        expressions = await this.evaluateLayoutExpressions()
+      }
 
       // Check layouts for expressions/roles and find the first one that fits
       this.layout = this.layouts.find(({ pageLayoutID, config = {} }) => {