blog: use bus + PageTransition[Start|End] to indicate page loading

public/common/bus.js

@@ -7,3 +7,5 @@ export default emitter
 export const SEARCH_STRING_CHANGED = "searchStringChanged";
 
 export const PLAYER_MODAL = "playerModal";
+
+export const SET_LOADING = 'setLoading';

public/pages/blog/+data.js

@@ -37,6 +37,5 @@ async function data(pageContext) {
         searchStringFacade: searchString,
         title: "Blog",
         description: "Various tech blog",
-        loading: false,
     }
 }

public/pages/blog/BlogList.vue

@@ -22,7 +22,7 @@
                             >
                                 <v-container class="post-title ma-0 pa-0">
                                     <v-card-title>
-                                        <a class="post-title-text" v-html="item.title" :href="getLink(item)" @click="onPostClick()"></a>
+                                        <a class="post-title-text" v-html="item.title" :href="getLink(item)"></a>
                                     </v-card-title>
                                 </v-container>
                             </v-img>
@@ -120,7 +120,6 @@ export default {
       return blogIdPrefix + id
     },
     onClickPage(e) {
-      this.loading = true; // false will be set with the new data from server
 
       let actualPage = e--;
 
@@ -130,7 +129,6 @@ export default {
       navigate(url.pathname + url.search);
     },
     onSearchStringChanged(searchString) {
-        this.loading = true; // false will be set with the new data from server
 
         const url = new URL(window.location.href);
 
@@ -226,22 +224,6 @@ export default {
           this.removeTopBlogPosition();
       }
     },
-    onPostClick() {
-        this.setLoadingAnimation()
-    },
-    setLoadingAnimation() {
-        this.loading = true
-    },
-  },
-  computed: {
-      loading: {
-          get() {
-              return this.pageContext.data.loading
-          },
-          set(v) {
-              this.pageContext.data.loading = v;
-          }
-      }
   },
   watch: {
     'pageContext.data.items': function(newUserValue, oldUserValue) {

public/pages/blog/post/@id/+data.js

@@ -56,7 +56,6 @@ async function data(pageContext) {
         count,
         blogDto: blogResponse.data,
         items: commentResponse.data.items,
-        commentsLoading: false,
         // see getPageTitle.js
         title: unescapeHtml(blogResponse.data.title),
         description: blogResponse.data.preview,

public/pages/blog/post/@id/BlogPost.vue

@@ -40,7 +40,7 @@
 
     <template v-if="pageContext.data.blogDto.messageId">
         <v-container class="ma-0 pa-0" fluid>
-          <MessageItem v-for="(item, index) in pageContext.data.items" v-if="!commentsLoading"
+          <MessageItem v-for="(item, index) in pageContext.data.items"
             :id="getItemId(item.id)"
             :key="item.id"
             :item="item"
@@ -49,13 +49,6 @@
             @click="onClickTrap"
           ></MessageItem>
 
-          <v-progress-linear
-            class="my-2"
-            v-else
-            color="primary"
-            indeterminate
-          ></v-progress-linear>
-
           <v-btn class="my-2 mx-2" variant="flat" color="primary" :href="getChatLink()">Write a comment</v-btn>
 
           <v-pagination
@@ -132,8 +125,6 @@ export default {
     },
 
     onClickPage(e) {
-      this.commentsLoading = true; // false will be set with the new data from server
-
       const url = new URL(window.location.href);
       url.searchParams.set(PAGE_PARAM, e);
       navigate(url.pathname + url.search);
@@ -149,16 +140,6 @@ export default {
   components: {
     MessageItem,
   },
-  computed: {
-      commentsLoading: {
-        get() {
-            return this.pageContext.data.commentsLoading
-        },
-        set(v) {
-            this.pageContext.data.commentsLoading = v;
-        }
-    }
-  },
   mounted() {
   },
   beforeUnmount() {

public/pages/chat/@id/message/@messageId/+data.js

@@ -21,7 +21,6 @@ async function data(pageContext) {
             },
             title: "Page not found",
             chatMessageHref: null,
-            loading: false,
         }
     }
 
@@ -38,7 +37,6 @@ async function data(pageContext) {
         description: publishedMessageResponse.data.preview,
         showSearchButton: true,
         chatMessageHref,
-        loading: false,
     }
 
 }

public/renderer/+onPageTransitionEnd.js

@@ -0,0 +1,15 @@
+import bus, {SET_LOADING} from "../common/bus.js";
+
+export { onPageTransitionEnd }
+
+function onPageTransitionEnd(pageContext) {
+    if (typeof window == "undefined") {
+        //console.log("onPageTransitionEnd Application is on server side", pageContext);
+        return undefined
+    } else {
+        //console.log("onPageTransitionEnd Application is on client side", pageContext);
+        bus.emit(SET_LOADING, false)
+        return undefined
+    }
+
+}

public/renderer/+onPageTransitionStart.js

@@ -0,0 +1,15 @@
+import bus, {SET_LOADING} from "../common/bus.js";
+
+export { onPageTransitionStart }
+
+function onPageTransitionStart(pageContext) {
+    if (typeof window == "undefined") {
+        //console.log("+onPageTransitionStart Application is on server side", pageContext);
+        return undefined
+    } else {
+        //console.log("+onPageTransitionStart Application is on client side", pageContext);
+        bus.emit(SET_LOADING, true)
+        return undefined
+    }
+
+}

public/renderer/PageShell.vue

@@ -3,7 +3,6 @@
         <v-app-bar color='indigo' dark :density="getDensity()">
             <template v-if="getShowSearchButton()">
                 <v-breadcrumbs
-                    @click="onBreadcrumbsLinkClick"
                     :items="getBreadcrumbs()"
                 />
                 <v-spacer/>
@@ -35,12 +34,13 @@
 </template>
 
 <script>
-    import {hasLength, getUrlPrefix} from "#root/common/utils";
+    import {hasLength} from "#root/common/utils";
     import {blog, path_prefix, blog_post, videochat} from "#root/common/router/routes.js";
     import bus, {SEARCH_STRING_CHANGED} from "#root/common/bus.js";
     import {usePageContext} from "./usePageContext.js";
     import CollapsedSearch from "#root/common/components/CollapsedSearch.vue";
     import PlayerModal from "#root/common/components/PlayerModal.vue";
+    import {SET_LOADING} from "../common/bus.js";
 
     export default {
         components: {PlayerModal, CollapsedSearch},
@@ -54,7 +54,12 @@
             }
         },
         data() {
-            return this.pageContext.data;
+          return {
+            chatMessageHref: this.pageContext.data.chatMessageHref,
+            chatTitle: this.pageContext.data.chatTitle,
+            showSearchButton: this.pageContext.data.showSearchButton,
+            pageLoading: false,
+          }
         },
         methods: {
             getDensity() {
@@ -63,16 +68,6 @@
             isMobile() {
                 return this.pageContext.isMobile
             },
-            onBreadcrumbsLinkClick(e) {
-                const relUrl = e?.target?.href?.slice(getUrlPrefix().length);
-                console.log("onBreadcrumbsLinkClick", relUrl);
-                if (hasLength(relUrl)) {
-                    this.setLoadingAnimation();
-                }
-            },
-            setLoadingAnimation(){
-                this.pageLoading = true
-            },
             getBreadcrumbs() {
                 const ret = [
                     {
@@ -149,6 +144,9 @@
             shouldShowTitle() {
                 return hasLength(this.$data.chatTitle)
             },
+            setLoading(v) {
+              this.$data.pageLoading = v
+            },
         },
         computed: {
             chatId() {
@@ -157,15 +155,13 @@
             messageId() {
                 return this.pageContext.routeParams?.messageId
             },
-            pageLoading: {
-              get() {
-                return this.pageContext.data.loading
-              },
-              set(v) {
-                this.pageContext.data.loading = v;
-              }
-            },
         },
+        mounted() {
+          bus.on(SET_LOADING, this.setLoading)
+        },
+        beforeUnmount() {
+          bus.off(SET_LOADING, this.setLoading)
+        }
     }
 
 </script>