Fix flickering of list pages when updating

Partly regression from openhab#2823 and openhab#2827. Signed-off-by: Florian Hotze <dev@florianhotze.com>
florian-h05 · Oct 26, 2024 · f574b79 · f574b79
1 parent 54b96e7
commit f574b79
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 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
@@ -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,17 +184,18 @@ 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) {
             this.$refs.searchbar?.f7Searchbar.$inputEl[0].focus()
           }
           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
@@ -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
@@ -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
@@ -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
@@ -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(() => {