From f574b799d1bf4e2d5f361ce1d60a4e08faac6e28 Mon Sep 17 00:00:00 2001
From: Florian Hotze <dev@florianhotze.com>
Date: Sat, 26 Oct 2024 13:57:31 +0200
Subject: [PATCH] Fix flickering of list pages when updating

Partly regression from #2823 and #2827.

Signed-off-by: Florian Hotze <dev@florianhotze.com>
---
 .../pages/settings/items/items-list-vlist.vue    | 16 +++++++++-------
 .../web/src/pages/settings/pages/pages-list.vue  | 10 ++++++----
 .../web/src/pages/settings/rules/rules-list.vue  | 10 ++++++----
 .../web/src/pages/settings/schedule/schedule.vue | 10 ++++++----
 .../src/pages/settings/things/things-list.vue    | 10 ++++++----
 5 files changed, 33 insertions(+), 23 deletions(-)

diff --git a/bundles/org.openhab.ui/web/src/pages/settings/items/items-list-vlist.vue b/bundles/org.openhab.ui/web/src/pages/settings/items/items-list-vlist.vue
index 8a7acc7d17..6358fc6b33 100644
--- a/bundles/org.openhab.ui/web/src/pages/settings/items/items-list-vlist.vue
+++ b/bundles/org.openhab.ui/web/src/pages/settings/items/items-list-vlist.vue
@@ -6,10 +6,10 @@
         <f7-link icon-md="material:done_all" @click="toggleCheck()"
                  :text="(!$theme.md) ? ((showCheckboxes) ? 'Done' : 'Select') : ''" />
       </f7-nav-right>
-      <f7-subnavbar :inner="false" v-show="ready">
+      <f7-subnavbar :inner="false" v-show="initSearchbar">
         <!-- Only render searchbar, if page is ready. Otherwise searchbar is broken after changes to the Items list. -->
         <f7-searchbar
-          v-if="ready"
+          v-if="initSearchbar"
           ref="searchbar"
           class="searchbar-items"
           search-container=".virtual-list"
@@ -145,6 +145,7 @@ export default {
   data () {
     return {
       ready: false,
+      initSearchbar: false,
       loading: false,
       items: [], // [{ label: 'Staircase', name: 'Staircase'}],
       vlData: {
@@ -173,8 +174,8 @@ export default {
       if (this.loading) return
       this.loading = true
 
-      if (this.ready) this.$f7.data.lastItemSearchQuery = this.$refs.searchbar?.f7Searchbar.query
-      this.ready = false
+      if (this.initSearchbar) this.$f7.data.lastItemSearchQuery = this.$refs.searchbar?.f7Searchbar.query
+      this.initSearchbar = false
 
       this.$oh.api.get('/rest/items?metadata=semantics').then(data => {
         this.items = data.sort((a, b) => {
@@ -183,7 +184,11 @@ export default {
           return labelA.localeCompare(labelB)
         })
         this.$refs.itemsList.f7VirtualList.replaceAllItems(this.items)
+        this.initSearchbar = true
+        this.loading = false
+
         if (!this.eventSource) this.startEventSource()
+        this.ready = true
 
         this.$nextTick(() => {
           if (this.$device.desktop) {
@@ -191,9 +196,6 @@ export default {
           }
           this.$refs.searchbar?.f7Searchbar.search(this.$f7.data.lastItemSearchQuery || '')
         })
-
-        this.loading = false
-        this.ready = true
       })
     },
     startEventSource () {
diff --git a/bundles/org.openhab.ui/web/src/pages/settings/pages/pages-list.vue b/bundles/org.openhab.ui/web/src/pages/settings/pages/pages-list.vue
index 5fdb394b7b..72890f166c 100644
--- a/bundles/org.openhab.ui/web/src/pages/settings/pages/pages-list.vue
+++ b/bundles/org.openhab.ui/web/src/pages/settings/pages/pages-list.vue
@@ -6,9 +6,9 @@
         <f7-link icon-md="material:done_all" @click="toggleCheck()"
                  :text="(!$theme.md) ? ((showCheckboxes) ? 'Done' : 'Select') : ''" />
       </f7-nav-right>
-      <f7-subnavbar :inner="false" v-show="ready">
+      <f7-subnavbar :inner="false" v-show="initSearchbar">
         <f7-searchbar
-          v-if="ready"
+          v-if="initSearchbar"
           ref="searchbar"
           class="searchbar-pages"
           search-container=".pages-list"
@@ -158,6 +158,7 @@ export default {
   data () {
     return {
       ready: false,
+      initSearchbar: false,
       loading: false,
       pages: [],
       selectedItems: [],
@@ -218,8 +219,8 @@ export default {
       if (this.loading) return
       this.loading = true
 
-      if (this.ready) this.$f7.data.lastPagesSearchQuery = this.$refs.searchbar?.f7Searchbar.query
-      this.ready = false
+      if (this.initSearchbar) this.$f7.data.lastPagesSearchQuery = this.$refs.searchbar?.f7Searchbar.query
+      this.initSearchbar = false
 
       this.$set(this, 'selectedItems', [])
       this.showCheckboxes = false
@@ -232,6 +233,7 @@ export default {
         this.pages = pagesAndSitemaps.sort((a, b) => {
           return a.config.label.localeCompare(b.config.label)
         })
+        this.initSearchbar = true
 
         this.loading = false
         this.ready = true
diff --git a/bundles/org.openhab.ui/web/src/pages/settings/rules/rules-list.vue b/bundles/org.openhab.ui/web/src/pages/settings/rules/rules-list.vue
index c25ed034a8..f86c3a37ca 100644
--- a/bundles/org.openhab.ui/web/src/pages/settings/rules/rules-list.vue
+++ b/bundles/org.openhab.ui/web/src/pages/settings/rules/rules-list.vue
@@ -6,10 +6,10 @@
         <f7-link icon-md="material:done_all" @click="toggleCheck()"
                  :text="(!$theme.md) ? ((showCheckboxes) ? 'Done' : 'Select') : ''" />
       </f7-nav-right>
-      <f7-subnavbar :inner="false" v-show="ready">
+      <f7-subnavbar :inner="false" v-show="initSearchbar">
         <!-- Only render searchbar, if page is ready. Otherwise searchbar is broken after changes to the rules list. -->
         <f7-searchbar
-          v-if="ready"
+          v-if="initSearchbar"
           ref="searchbar"
           class="searchbar-rules"
           search-container=".rules-list"
@@ -162,6 +162,7 @@ export default {
   data () {
     return {
       ready: false,
+      initSearchbar: false,
       loading: false,
       noRuleEngine: false,
       rules: [],
@@ -213,8 +214,8 @@ export default {
       if (this.loading) return
       this.loading = true
 
-      if (this.ready) this.$f7.data[`last${this.type}SearchQuery`] = this.$refs.searchbar?.f7Searchbar.query
-      this.ready = false
+      if (this.initSearchbar) this.$f7.data[`last${this.type}SearchQuery`] = this.$refs.searchbar?.f7Searchbar.query
+      this.initSearchbar = false
 
       this.$set(this, 'selectedItems', [])
       this.showCheckboxes = false
@@ -250,6 +251,7 @@ export default {
         })
 
         this.uniqueTags.sort()
+        this.initSearchbar = true
 
         this.loading = false
         this.ready = true
diff --git a/bundles/org.openhab.ui/web/src/pages/settings/schedule/schedule.vue b/bundles/org.openhab.ui/web/src/pages/settings/schedule/schedule.vue
index 9e3de9a3f7..224c48f10d 100644
--- a/bundles/org.openhab.ui/web/src/pages/settings/schedule/schedule.vue
+++ b/bundles/org.openhab.ui/web/src/pages/settings/schedule/schedule.vue
@@ -6,9 +6,9 @@
         <f7-link icon-md="material:done_all" @click="toggleCheck()"
                  :text="(!$theme.md) ? ((showCheckboxes) ? 'Done' : 'Select') : ''" />
       </f7-nav-right>
-      <f7-subnavbar :inner="false" v-show="ready">
+      <f7-subnavbar :inner="false" v-show="initSearchbar">
         <f7-searchbar
-          v-if="ready"
+          v-if="initSearchbar"
           ref="searchbar"
           class="searchbar-schedule"
           search-container=".timeline"
@@ -88,6 +88,7 @@ export default {
   data () {
     return {
       ready: false,
+      initSearchbar: false,
       loading: false,
       rules: [],
       noRuleEngine: false,
@@ -112,8 +113,8 @@ export default {
       if (this.loading) return
       this.loading = true
 
-      if (this.ready) this.$f7.data.lastScheduleSearchQuery = this.$refs.searchbar?.f7Searchbar.query
-      this.ready = false
+      if (this.initSearchbar) this.$f7.data.lastScheduleSearchQuery = this.$refs.searchbar?.f7Searchbar.query
+      this.initSearchbar = false
 
       let occurrences = []
 
@@ -123,6 +124,7 @@ export default {
       this.$oh.api.get('/rest/rules/schedule/simulations?from=' + start.toISOString() + '&until=' + limit.toISOString()).then(data => {
         this.rules = data
         this.loading = false
+        this.initSearchbar = true
 
         // map RulesExecutions per time
         this.rules.forEach((rule) => {
diff --git a/bundles/org.openhab.ui/web/src/pages/settings/things/things-list.vue b/bundles/org.openhab.ui/web/src/pages/settings/things/things-list.vue
index a45c03b9de..50a952683a 100644
--- a/bundles/org.openhab.ui/web/src/pages/settings/things/things-list.vue
+++ b/bundles/org.openhab.ui/web/src/pages/settings/things/things-list.vue
@@ -6,9 +6,9 @@
         <f7-link icon-md="material:done_all" @click="toggleCheck()"
                  :text="(!$theme.md) ? ((showCheckboxes) ? 'Done' : 'Select') : ''" />
       </f7-nav-right>
-      <f7-subnavbar :inner="false" v-show="ready">
+      <f7-subnavbar :inner="false" v-show="initSeachbar">
         <f7-searchbar
-          v-if="ready"
+          v-if="initSeachbar"
           ref="searchbar"
           class="searchbar-things"
           search-container=".contacts-list"
@@ -170,6 +170,7 @@ export default {
   data () {
     return {
       ready: false,
+      initSeachbar: false,
       loading: false,
       things: [],
       inbox: [],
@@ -252,11 +253,12 @@ export default {
       if (this.loading) return
       this.loading = true
 
-      if (this.ready) this.$f7.data.lastThingsSearchQuery = this.$refs.searchbar?.f7Searchbar.query
-      this.ready = false
+      if (this.initSeachbar) this.$f7.data.lastThingsSearchQuery = this.$refs.searchbar?.f7Searchbar.query
+      this.initSeachbar = false
 
       this.$oh.api.get('/rest/things?summary=true').then((data) => {
         this.things = data.sort((a, b) => (a.label || a.UID).localeCompare(b.label || a.UID))
+        this.initSeachbar = true
         this.loading = false
         this.ready = true
         this.$nextTick(() => {