From 08ebc756214abfd8ca117206a0df78466e56784f Mon Sep 17 00:00:00 2001
From: Yannick Schaus <github@schaus.net>
Date: Tue, 12 Oct 2021 20:16:09 +0200
Subject: [PATCH] Fix home page initialization logic

Regressions were introduced with #1055 where the state tracker wouldn't be started after going back to the home page from another page.
Also add a preloader which should only be displayed the first time.

Should fix #1161.

Signed-off-by: Yannick Schaus <github@schaus.net>
---
 bundles/org.openhab.ui/web/src/pages/home.vue | 29 ++++++++++++-------
 1 file changed, 19 insertions(+), 10 deletions(-)

diff --git a/bundles/org.openhab.ui/web/src/pages/home.vue b/bundles/org.openhab.ui/web/src/pages/home.vue
index 7d94b71a9f..ccaafe276d 100644
--- a/bundles/org.openhab.ui/web/src/pages/home.vue
+++ b/bundles/org.openhab.ui/web/src/pages/home.vue
@@ -1,5 +1,5 @@
 <template>
-  <f7-page stacked name="HomePage" class="page-home" :class="{ 'standard-background': $f7.data.themeOptions.homeBackground === 'standard' }" @page:init="onPageInit" @page:beforein="onPageBeforeIn" @page:beforeout="onPageBeforeOut">
+  <f7-page stacked name="HomePage" class="page-home" :class="{ 'standard-background': $f7.data.themeOptions.homeBackground === 'standard' }" @page:init="onPageInit" @page:beforein="onPageBeforeIn" @page:afterin="onPageAfterIn" @page:beforeout="onPageBeforeOut">
     <f7-navbar :large="$f7.data.themeOptions.homeNavbar !== 'simple'" :large-transparent="$f7.data.themeOptions.homeNavbar !== 'simple'" class="home-nav">
       <f7-nav-left>
         <f7-link icon-ios="f7:menu" icon-aurora="f7:menu" icon-md="material:menu" panel-open="left" />
@@ -25,7 +25,13 @@
       <f7-link tab-link v-if="tabVisible('properties')" @click="currentTab = 'properties'" :tab-link-active="currentTab === 'properties'" icon-ios="f7:bolt_fill" icon-aurora="f7:bolt_fill" icon-md="material:flash_on" :text="$t('home.properties.tab')" />
     </f7-toolbar>
 
-    <f7-tabs v-if="modelReady">
+    <f7-block v-if="ready && !modelReady" class="text-align-center padding-top margin-top">
+      <f7-block-title>
+        <f7-preloader :size="30" />
+        <div>Loading...</div>
+      </f7-block-title>
+    </f7-block>
+    <f7-tabs v-else>
       <f7-tab id="tab-overview" :tab-active="currentTab === 'overview'" @tab:show="() => this.currentTab = 'overview'">
         <overview-tab v-if="currentTab === 'overview'" :context="context" :key="overviewPageKey" :allow-chat="allowChat" />
       </f7-tab>
@@ -142,20 +148,23 @@ export default {
     }
   },
   watch: {
-    ready: {
-      handler (val) {
-        if (val) {
-          this.loadModel()
-          this.$store.dispatch('startTrackingStates')
-        }
-      },
-      immediate: true
+    ready (val, oldVal) {
+      if (val && !oldVal) {
+        this.loadModel()
+        this.$store.dispatch('startTrackingStates')
+      }
     }
   },
   methods: {
     onPageBeforeIn () {
       this.overviewPageKey = this.$utils.id()
     },
+    onPageAfterIn () {
+      if (this.ready) {
+        this.loadModel()
+        this.$store.dispatch('startTrackingStates')
+      }
+    },
     onPageBeforeOut () {
       this.$store.dispatch('stopTrackingStates')
     },