OH 3 UI is very slow on any browser in android and windows, but super fast on any browser in iOS

Navigating between pages in the new OH 3 (tried all versions up to 3.2.0M5) UI is extremely slow on Android devices (tried Firefox, Chrome, Duckduckgo, Lynket). The more references to items I add in components and widgets in the page, the slower it gets.
I created a testpage (screenshot) which takes 4-5 seconds to load and another 1-2 seconds to reder it. (on a samsung galaxy A71 in firefox. It is ca. 1 second faster on Duckduckgo).
If I navigate from a page with many items to another it takes additional time.

The same page on a iPhone 11 on any browser (safari, firefox, chrome) takes less than a second to open and render. It´s super smooth.

On a PC (windows with Firefox or chrome), it´s also a bit slow (about 1.5 to 2 seconds).

I tried to optimize my page and store many datapoints in a JSON and pick it to use less items like this:
icon: =JSON.parse(items.Helligkeit_in_world_Haus_EG_TestRaum1_ui_widget_controller.state)[“room_detail_edit__icon_iconname”]
text: =JSON.parse(items.Helligkeit_in_world_Haus_EG_TestRaum1_ui_widget_controller.state)[“room_detail_edit__value”]
But my pages are still unusably slow.
If I remove ALL references to items pages load quite fast. So I don´t think it´s the rendering of the page.
I think its related to the connection to openhab items.

openhab is running in a docker container on a superfast LINUX-Server. ping to openhab machine is 1ms on wired network, 1-3 ms on wifi

I did a profiling in chrome for a reload of my page:
(see screenshot)

I´m quite desperate already because I tried so many things already. I´m playing with the idea to store ALL itemdata in one single string item as JSON to speed up things.

I found a solution which makes everything superfast:
simply open your pages with the action popup.
eg:

- component: oh-button
        config:
          action: popup
          actionModal: =props.page_link

on mobiles this is great, but on desktop the popup page dimension is fixed with the variables:
–f7-popup-tablet-width, --f7-popup-tablet-height , widht and height with 50% and some margin.
for desktop I have no idea how to change the size and position of the page.
maybe I´ll create a second set of pages without pop just for destop.

So your Overview page is just a bunch of label cells which, when clicked, open pop-ups?

My overview page looks like this - a series of custom widgets which represent each room.

here is the yaml for it:

config:
  label: Übersicht
  sidebar: true
blocks:
  - component: oh-block
    config: {}
    slots:
      default:
        - component: oh-grid-row
          config: {}
          slots:
            default:
              - component: oh-grid-col
                config: {}
                slots:
                  default:
                    - component: f7-block
                      config:
                        style:
                          margin-top: 0px
                          display: flex
                          flex-direction: column
                          justify-content: flex-start
                          align-items: stretch
                          padding: 0px
                      slots:
                        default: []
        - component: oh-grid-row
          config: {}
          slots:
            default:
              - component: oh-grid-col
                config: {}
                slots:
                  default:
                    - component: f7-block
                      config:
                        style:
                          margin-top: 0px
                          display: flex
                          flex-direction: column
                          justify-content: flex-start
                          align-items: stretch
                          padding: 0px
                      slots:
                        default:
                          - component: f7-block
                            config:
                              style:
                                margin: 0px
                                padding: 0px
                                margin-bottom: 20px
                            slots:
                              default:
                                - component: widget:prod_room_overview_roomoverview_world
                                  config:
                                    page_link: page:prod_world_detail
                                    hierarchy_link: page:welt
                          - component: f7-block
                            config:
                              style:
                                margin: 0px
                                padding: 0px
                                margin-bottom: 20px
                            slots:
                              default:
                                - component: widget:prod_room_overview_roomoverview_world_Aussenbereich
                                  config:
                                    page_link: page:prod_world_Aussenbereich_detail
                                    hierarchy_link: page:aussen_overview
                          - component: f7-block
                            config:
                              style:
                                margin: 0px
                                padding: 0px
                                margin-bottom: 20px
                            slots:
                              default:
                                - component: widget:prod_room_overview_roomoverview_world_Haus
                                  config:
                                    page_link: page:prod_world_Haus_detail
                                    hierarchy_link: page:haus_overview
                          - component: f7-block
                            config:
                              style:
                                margin: 0px
                                padding: 0px
                                margin-bottom: 20px
                            slots:
                              default:
                                - component: widget:prod_room_overview_roomoverview_world_Garage
                                  config:
                                    page_link: page:prod_world_Garage_detail
                                    hierarchy_link: page:not implemented yet
  - component: oh-block
    config: {}
    slots:
      default:
        - component: oh-grid-row
          config: {}
          slots:
            default:
              - component: oh-grid-col
                config: {}
                slots:
                  default:
                    - component: f7-accordion-item
                      config:
                        opened: true
                      slots:
                        default:
                          - component: f7-accordion-toggle
                            config:
                              style:
                                margin: 0px
                                margin-top: 5px
                                padding: 0px
                            slots:
                              default:
                                - component: f7-block
                                  config:
                                    style:
                                      --f7-grid-gap: 0px
                                      align-items: center
                                      background: lightgrey
                                      border-radius: 12px
                                      display: flex
                                      flex-direction: row
                                      flex-wrap: wrap
                                      justify-content: flex-start
                                      margin: 0
                                      padding: 0
                                  slots:
                                    default:
                                      - component: oh-icon
                                        config:
                                          icon: favourites
                                          style:
                                            height: 2.5em
                                      - component: Label
                                        config:
                                          style:
                                            color: black
                                            font-size: 2em
                                            margin-left: 20px
                                            text-align: left
                                          text: Favoriten
                          - component: f7-accordion-content
                            config:
                              style:
                                margin: 0px
                                margin-left: 5px
                                margin-top: 3px
                            slots:
                              default:
                                - component: f7-accordion-item
                                  slots:
                                    default:
                                      - component: f7-block
                                        config:
                                          style:
                                            --f7-grid-gap: 0px
                                            align-items: stretch
                                            display: flex
                                            flex-direction: column
                                            flex-wrap: wrap
                                            justify-content: flex-start
                                            margin: 0px
                                            padding: 0px
                                        slots:
                                          default:
                                            - component: oh-grid-row
                                              config: {}
                                              slots:
                                                default:
                                                  - component: oh-grid-col
                                                    config: {}
                                                    slots:
                                                      default:
                                                        - component: f7-block
                                                          config:
                                                            style:
                                                              margin-top: 0px
                                                              display: flex
                                                              flex-direction: column
                                                              justify-content: flex-start
                                                              align-items: stretch
                                                              padding: 0px
                                                          slots:
                                                            default:
                                                              - component: f7-block
                                                                config:
                                                                  style:
                                                                    margin: 0px
                                                                    padding: 0px
                                                                    margin-bottom: 20px
                                                                slots:
                                                                  default:
                                                                    - component: widget:prod_room_overview_roomoverview_world_Haus_OG_Studio
                                                                      config:
                                                                        page_link: page:prod_world_Haus_OG_Studio_detail
                                                              - component: f7-block
                                                                config:
                                                                  style:
                                                                    margin: 0px
                                                                    padding: 0px
                                                                    margin-bottom: 20px
                                                                slots:
                                                                  default:
                                                                    - component: widget:prod_room_overview_roomoverview_world_Haus_EG_Esszimmer
                                                                      config:
                                                                        page_link: page:prod_world_Haus_EG_Esszimmer_detail
                                                              - component: f7-block
                                                                config:
                                                                  style:
                                                                    margin: 0px
                                                                    padding: 0px
                                                                    margin-bottom: 20px
                                                                slots:
                                                                  default:
                                                                    - component: widget:prod_room_overview_roomoverview_world_Haus_EG_Wohnzimmer
                                                                      config:
                                                                        page_link: page:prod_world_Haus_EG_Wohnzimmer_detail
                                                              - component: f7-block
                                                                config:
                                                                  style:
                                                                    margin: 0px
                                                                    padding: 0px
                                                                    margin-bottom: 20px
                                                                slots:
                                                                  default:
                                                                    - component: widget:prod_room_overview_roomoverview_world_Haus_OG_Schlafzimmer
                                                                      config:
                                                                        page_link: page:prod_world_Haus_OG_Schlafzimmer_detail
                                                              - component: f7-block
                                                                config:
                                                                  style:
                                                                    margin: 0px
                                                                    padding: 0px
                                                                    margin-bottom: 20px
                                                                slots:
                                                                  default:
                                                                    - component: widget:prod_room_overview_roomoverview_world_Aussenbereich_Aussenbereich_EG_Garten_Terrasse_EG
                                                                      config:
                                                                        page_link: page:prod_world_Aussenbereich_Aussenbereich_EG_Garten_Terrasse_EG_detail
                                                              - component: f7-block
                                                                config:
                                                                  style:
                                                                    margin: 0px
                                                                    padding: 0px
                                                                    margin-bottom: 20px
                                                                slots:
                                                                  default:
                                                                    - component: widget:prod_room_overview_roomoverview_world_Aussenbereich_Aussenbereich_EG_Garten_Terrasse_EG_Pool
                                                                      config:
                                                                        page_link: page:prod_world_Aussenbereich_Aussenbereich_EG_Garten_Terrasse_EG_Pool_detail
                                                              - component: f7-block
                                                                config:
                                                                  style:
                                                                    margin: 0px
                                                                    padding: 0px
                                                                    margin-bottom: 20px
                                                                slots:
                                                                  default:
                                                                    - component: widget:prod_room_overview_roomoverview_world_Haus_EG_Kueche
                                                                      config:
                                                                        page_link: page:prod_world_Haus_EG_Kueche_detail
masonry: null
grid: null

I followed my plan of popups and I achieved:
fullscreen popup. Navigation back and forth.
PRO:

  • page transition is suuuper fast

CON:

  • The initial loading of the (overview)page takes 15 to 20 seconds which again makes the UI unusable because most browsers and the openHAB App does not keep the page open. (when you open the app after some time (hours) it will reload the overview page). To wait 15 seconds until you can start doing something feels like infinity.
  • browser-back does not work properly.

However, if someone wants to give it a try, here is what I did:
I moved every room-page into a room-widget.
E.g. one room looks like this:

here is a part of the code for it:

uid: prod_world_Haus_OG_Studio_detail
tags: []
props:
  parameters: []
  parameterGroups: []
timestamp: Feb 20, 2022, 9:18:01 AM
component: f7-block
config:
  class: page-content infinite-scroll-content
slots:
  default:
    - component: oh-grid-row
      config: {}
      slots:
        default:
          - component: oh-grid-col
            config: {}
            slots:
              default:
                - component: f7-block
                  config:
                    style:
                      margin: 0px
                      padding: 0px
                      margin-top: 5px
                  slots:
                    default:
                      - component: oh-button
                        config:
                          text: Studio
                          popup-close: true
                          fill: true
                          style:
                            font-size: 2em
                            height: 2.5em
                            display: flex
                            align-items: center
                      - component: oh-button
                        config:
                          text: zurück
                          popup-close: true
                          fill: true
                          style:
                            height: 2.5em
    - component: oh-grid-row
      config: {}
      slots:
        default:
          - component: oh-grid-col
            config: {}
            slots:
              default:
                - component: f7-block
                  config:
                    style:
                      margin: 0px
                      padding: 0px
                      margin-top: 5px
                  slots:
                    default:
                      - component: f7-accordion-item
                        config:
                          opened: true
                        slots:
                          default:
                            - component: f7-accordion-toggle
                              config:
                                style:
                                  margin: 0px
                                  padding: 0px
                                  margin-top: 5px
                              slots:
                                default:
                                  - component: f7-block
                                    config:
                                      style:
                                        display: flex
                                        flex-wrap: wrap
                                        flex-direction: row
                                        justify-content: flex-start
                                        align-items: center
                                        --f7-grid-gap: 0px
                                        padding: 0
                                        margin: 0
                                        background: lightgrey
                                        border-radius: 12px
                                    slots:
                                      default:
                                        - component: oh-icon
                                          config:
                                            icon: info
                                            style:
                                              height: 2.5em
                                        - component: Label
                                          config:
                                            text: Status
                                            style:
                                              color: black
                                              font-size: 2em
                                              text-align: left
                                              margin-left: 20px
                            - component: f7-accordion-content
                              config:
                                style:
                                  margin: 0px
                                  margin-top: 3px
                                  margin-left: 5px
                              slots:
                                default:
                                  - component: f7-accordion-item
                                    slots:
                                      default:
                                        - component: f7-block
                                          config:
                                            style:
                                              display: flex
                                              flex-direction: column
                                              justify-content: flex-start
                                              flex-wrap: wrap
                                              align-items: flex-start
                                              --f7-grid-gap: 0px
                                              padding: 0px
                                              margin: 0px
                                          slots:
                                            default:
                                              - component: Label
                                                config:
                                                  text: = items.world_Haus_OG_Studio_status_windoor_text.state
    - component: oh-grid-row
      config: {}
      slots:
        default:
          - component: oh-grid-col
            config: {}
            slots:
              default:
                - component: f7-block
                  config:
                    style:
                      margin: 0px
                      padding: 0px
                      margin-top: 5px
                  slots:
                    default:
                      - component: f7-accordion-item
                        config:
                          opened: true
                        slots:
                          default:
                            - component: f7-accordion-toggle
                              config:
                                style:
                                  margin: 0px
                                  padding: 0px
                                  margin-top: 5px
                              slots:
                                default:
                                  - component: f7-block
                                    config:
                                      style:
                                        display: flex
                                        flex-wrap: wrap
                                        flex-direction: row
                                        justify-content: flex-start
                                        align-items: center
                                        --f7-grid-gap: 0px
                                        padding: 0
                                        margin: 0
                                        background: lightgrey
                                        border-radius: 12px
                                    slots:
                                      default:
                                        - component: oh-icon
                                          config:
                                            icon: lightbulb_on
                                            style:
                                              height: 2.5em
                                        - component: Label
                                          config:
                                            text: Beleuchtung
                                            style:
                                              color: black
                                              font-size: 2em
                                              text-align: left
                                              margin-left: 20px
                            - component: f7-accordion-content
                              config:
                                style:
                                  margin: 0px
                                  margin-top: 3px
                                  margin-left: 5px
                              slots:
                                default:
                                  - component: f7-accordion-item
                                    slots:
                                      default:
                                        - component: f7-block
                                          config:
                                            style:
                                              display: flex
                                              flex-direction: row
                                              justify-content: flex-start
                                              flex-wrap: wrap
                                              align-items: flex-start
                                              --f7-grid-gap: 0px
                                              padding: 0px
                                              padding-top: 13px
                                              margin: 0px
                                          slots:
                                            default:
                                              - component: f7-card
                                                config:
                                                  title: '=JSON.parse(items.Deckenleuchte_in_world_Haus_OG_Studio_ui_widget_controller.state.trim().startsWith("-") ? "{}" : items.Deckenleuchte_in_world_Haus_OG_Studio_ui_widget_controller.state.trim().startsWith("NULL") ? "{}" : items.Deckenleuchte_in_world_Haus_OG_Studio_ui_widget_controller.state)["room_detail_edit__title"]'
                                                  style:
                                                    display: '= (JSON.parse(items.Deckenleuchte_in_world_Haus_OG_Studio_ui_widget_controller.state.trim().startsWith("-") ? "{}" : items.Deckenleuchte_in_world_Haus_OG_Studio_ui_widget_controller.state.trim().startsWith("NULL") ? "{}" : items.Deckenleuchte_in_world_Haus_OG_Studio_ui_widget_controller.state)["room_detail_edit__visible"] == "True") ? "" : "None"'
                                                    box-shadow: 0px 6px 6px hsl(0,0%,90%)
                                                    border-radius: 12px
                                                    margin: 2px
                                                slots:
                                                  default:
                                                    - component: f7-block
                                                      config:
                                                        style:
                                                          padding: 0px
                                                          margin: 0px
                                                          display: flex
                                                          justify-content: flex-start
                                                          align-items: center
                                                      slots:
                                                        default:
                                                          - component: f7-block
                                                            config:
                                                              style:
                                                                display: '= (JSON.parse(items.Deckenleuchte_in_world_Haus_OG_Studio_ui_widget_controller.state.trim().startsWith("-") ? "{}" : items.Deckenleuchte_in_world_Haus_OG_Studio_ui_widget_controller.state.trim().startsWith("NULL") ? "{}" : items.Deckenleuchte_in_world_Haus_OG_Studio_ui_widget_controller.state)["room_detail_edit__toggle_visible"] == "True") ? "flex" : "None"'
                                                                flex-direction: row
                                                                justify-slide: space-between
                                                                align-items: center
                                                                --f7-grid-gap: 0px
                                                                padding: 0
                                                                margin: 0
                                                            slots:
                                                              default:
                                                                - component: oh-icon
                                                                  config:
                                                                    icon: '="" + JSON.parse(items.Deckenleuchte_in_world_Haus_OG_Studio_ui_widget_controller.state.trim().startsWith("-") ? "{}" : items.Deckenleuchte_in_world_Haus_OG_Studio_ui_widget_controller.state.trim().startsWith("NULL") ? "{}" : items.Deckenleuchte_in_world_Haus_OG_Studio_ui_widget_controller.state)["room_detail_edit__toggle_icon_iconname"]'
                                                                    iconUseState: true
                                                                    style:
                                                                      opacity: '= (["NULL", "None", "VISIBLE"].includes(JSON.parse(items.Deckenleuchte_in_world_Haus_OG_Studio_ui_widget_controller.state.trim().startsWith("-") ? "{}" : items.Deckenleuchte_in_world_Haus_OG_Studio_ui_widget_controller.state.trim().startsWith("NULL") ? "{}" : items.Deckenleuchte_in_world_Haus_OG_Studio_ui_widget_controller.state)["room_detail_edit__toggle_icon_displaymode"]) ? "100" : "0")'
                                                                      display: '= (JSON.parse(items.Deckenleuchte_in_world_Haus_OG_Studio_ui_widget_controller.state.trim().startsWith("-") ? "{}" : items.Deckenleuchte_in_world_Haus_OG_Studio_ui_widget_controller.state.trim().startsWith("NULL") ? "{}" : items.Deckenleuchte_in_world_Haus_OG_Studio_ui_widget_controller.state)["room_detail_edit__toggle_icon_displaymode"] == "INVISIBLE_NOOCCUPY") ? "None" : ""'
                                                                      filter: '= JSON.parse(items.Deckenleuchte_in_world_Haus_OG_Studio_ui_widget_controller.state.trim().startsWith("-") ? "{}" : items.Deckenleuchte_in_world_Haus_OG_Studio_ui_widget_controller.state.trim().startsWith("NULL") ? "{}" : items.Deckenleuchte_in_world_Haus_OG_Studio_ui_widget_controller.state)["room_detail_edit__toggle_icon_filter"]'
                                                                      height: 20px
                                                                      width: 20px
                                                                - component: Label
                                                                  config:
                                                                    text: '=JSON.parse(items.Deckenleuchte_in_world_Haus_OG_Studio_ui_widget_controller.state.trim().startsWith("-") ? "{}" : items.Deckenleuchte_in_world_Haus_OG_Studio_ui_widget_controller.state.trim().startsWith("NULL") ? "{}" : items.Deckenleuchte_in_world_Haus_OG_Studio_ui_widget_controller.state)["room_detail_edit__toggle_label_value"]'
                                                                    style:
                                                                      display: '= (JSON.parse(items.Deckenleuchte_in_world_Haus_OG_Studio_ui_widget_controller.state.trim().startsWith("-") ? "{}" : items.Deckenleuchte_in_world_Haus_OG_Studio_ui_widget_controller.state.trim().startsWith("NULL") ? "{}" : items.Deckenleuchte_in_world_Haus_OG_Studio_ui_widget_controller.state)["room_detail_edit__toggle_label_visible"] == "True") ? "flex" : "None"'
                                                                      color: '=JSON.parse(items.Deckenleuchte_in_world_Haus_OG_Studio_ui_widget_controller.state.trim().startsWith("-") ? "{}" : items.Deckenleuchte_in_world_Haus_OG_Studio_ui_widget_controller.state.trim().startsWith("NULL") ? "{}" : items.Deckenleuchte_in_world_Haus_OG_Studio_ui_widget_controller.state)["room_detail_edit__toggle_label_color"]'
                                                                      font-size: '=JSON.parse(items.Deckenleuchte_in_world_Haus_OG_Studio_ui_widget_controller.state.trim().startsWith("-") ? "{}" : items.Deckenleuchte_in_world_Haus_OG_Studio_ui_widget_controller.state.trim().startsWith("NULL") ? "{}" : items.Deckenleuchte_in_world_Haus_OG_Studio_ui_widget_controller.state)["room_detail_edit__toggle_label_fontsize"]'
                                                                      text-align: left
                                                                - component: oh-toggle
                                                                  config:
                                                                    item: beleuchtung_schalten_schaltbefehl_og_studio_deckenleuchten
                                                                    style:
                                                                      margin: 9px
                                                                      --f7-toggle-handle-color: '=JSON.parse(items.Deckenleuchte_in_world_Haus_OG_Studio_ui_widget_controller.state.trim().startsWith("-") ? "{}" : items.Deckenleuchte_in_world_Haus_OG_Studio_ui_widget_controller.state.trim().startsWith("NULL") ? "{}" : items.Deckenleuchte_in_world_Haus_OG_Studio_ui_widget_controller.state)["room_detail_edit__toggle_handle_color"]'
                                                                      --f7-toggle-inactive-color: '=JSON.parse(items.Deckenleuchte_in_world_Haus_OG_Studio_ui_widget_controller.state.trim().startsWith("-") ? "{}" : items.Deckenleuchte_in_world_Haus_OG_Studio_ui_widget_controller.state.trim().startsWith("NULL") ? "{}" : items.Deckenleuchte_in_world_Haus_OG_Studio_ui_widget_controller.state)["room_detail_edit__toggle_inactive_color"]'
                                                                      --f7-toggle-active-color: '=JSON.parse(items.Deckenleuchte_in_world_Haus_OG_Studio_ui_widget_controller.state.trim().startsWith("-") ? "{}" : items.Deckenleuchte_in_world_Haus_OG_Studio_ui_widget_controller.state.trim().startsWith("NULL") ? "{}" : items.Deckenleuchte_in_world_Haus_OG_Studio_ui_widget_controller.state)["room_detail_edit__toggle_active_color"]'
                                                          - component: f7-block
                                                            config:
                                                              style:
                                                                margin-left: 12px
                                                                margin-right: 12px
                                                                width: 100px
                                                                padding: 0px
                                                                display: flex
                                                                justify-content: center
                                                                align-items: stretch
                                                            slots:
                                                              default:
                                                                - component: oh-slider
                                                                  config:
                                                                    item: beleuchtung_schalten_schaltbefehl_og_studio_deckenleuchten
                                                                    label: true
                                                                    min: 0
                                                                    max: 100
                                                                    step: 1
                                                                    style:
                                                                      display: '= (JSON.parse(items.Deckenleuchte_in_world_Haus_OG_Studio_ui_widget_controller.state.trim().startsWith("-") ? "{}" : items.Deckenleuchte_in_world_Haus_OG_Studio_ui_widget_controller.state.trim().startsWith("NULL") ? "{}" : items.Deckenleuchte_in_world_Haus_OG_Studio_ui_widget_controller.state)["room_detail_edit__slider_visible"] == "True") ? "flex" : "None"'
                                                                      width: 100%
                                                                      z-index: 0
                                                                      color: '=JSON.parse(items.Deckenleuchte_in_world_Haus_OG_Studio_ui_widget_controller.state.trim().startsWith("-") ? "{}" : items.Deckenleuchte_in_world_Haus_OG_Studio_ui_widget_controller.state.trim().startsWith("NULL") ? "{}" : items.Deckenleuchte_in_world_Haus_OG_Studio_ui_widget_controller.state)["room_detail_edit__slider_color"]'
                                                                      font-size: '=JSON.parse(items.Deckenleuchte_in_world_Haus_OG_Studio_ui_widget_controller.state.trim().startsWith("-") ? "{}" : items.Deckenleuchte_in_world_Haus_OG_Studio_ui_widget_controller.state.trim().startsWith("NULL") ? "{}" : items.Deckenleuchte_in_world_Haus_OG_Studio_ui_widget_controller.state)["room_detail_edit__slider_fontsize"]'
    - component: oh-grid-row
      config: {}
      slots:
        default:
          - component: oh-grid-col
            config: {}
            slots:
              default:
                - component: f7-block
                  config:
                    style:
                      margin: 0px
                      padding: 0px
                      margin-top: 5px
                  slots:
                    default:
                      - component: f7-accordion-item
                        config:
                          opened: true
                        slots:
                          default:
                            - component: f7-accordion-toggle
                              config:
                                style:
                                  margin: 0px
                                  padding: 0px
                                  margin-top: 5px
                              slots:
                                default:
                                  - component: f7-block
                                    config:
                                      style:
                                        display: flex
                                        flex-wrap: wrap
                                        flex-direction: row
                                        justify-content: space-between
                                        align-items: center
                                        --f7-grid-gap: 0px
                                        padding: 0
                                        margin: 0
                                        background: lightgrey
                                        border-radius: 12px
                                    slots:
                                      default:
                                        - component: f7-block
                                          config:
                                            style:
                                              flex-grow: 2
                                              display: flex
                                              flex-wrap: wrap
                                              flex-direction: row
                                              justify-content: flex-start
                                              align-items: center
                                              --f7-grid-gap: 0px
                                              padding: 0
                                              margin: 0
                                          slots:
                                            default:
                                              - component: oh-icon
                                                config:
                                                  icon: blinds
                                                  style:
                                                    height: 2.5em
                                              - component: Label
                                                config:
                                                  text: Beschattung
                                                  style:
                                                    color: black
                                                    font-size: 2em
                                                    text-align: left
                                                    margin-left: 20px
                                        - component: f7-block
                                          config:
                                            style:
                                              style:
                                                flex-shrink: 2
                                          slots:
                                            default:
                                              - component: oh-icon
                                                config:
                                                  icon: '="" + JSON.parse(items.is_shademanagerActiveIn_world_Haus_OG_Studio_in_world_Haus_OG_Studio_ui_widget_controller.state.trim().startsWith("-") ? "{}" : items.is_shademanagerActiveIn_world_Haus_OG_Studio_in_world_Haus_OG_Studio_ui_widget_controller.state.trim().startsWith("NULL") ? "{}" : items.is_shademanagerActiveIn_world_Haus_OG_Studio_in_world_Haus_OG_Studio_ui_widget_controller.state)["room_overview__iconname"]'
                                                  iconUseState: true
                                                  style:
                                                    opacity: '= (["NULL", "None", "VISIBLE"].includes(JSON.parse(items.is_shademanagerActiveIn_world_Haus_OG_Studio_in_world_Haus_OG_Studio_ui_widget_controller.state.trim().startsWith("-") ? "{}" : items.is_shademanagerActiveIn_world_Haus_OG_Studio_in_world_Haus_OG_Studio_ui_widget_controller.state.trim().startsWith("NULL") ? "{}" : items.is_shademanagerActiveIn_world_Haus_OG_Studio_in_world_Haus_OG_Studio_ui_widget_controller.state)["room_overview__displaymode"]) ? "100" : "0")'
                                                    display: '= (JSON.parse(items.is_shademanagerActiveIn_world_Haus_OG_Studio_in_world_Haus_OG_Studio_ui_widget_controller.state.trim().startsWith("-") ? "{}" : items.is_shademanagerActiveIn_world_Haus_OG_Studio_in_world_Haus_OG_Studio_ui_widget_controller.state.trim().startsWith("NULL") ? "{}" : items.is_shademanagerActiveIn_world_Haus_OG_Studio_in_world_Haus_OG_Studio_ui_widget_controller.state)["room_overview__displaymode"] == "INVISIBLE_NOOCCUPY") ? "None" : ""'
                                                    filter: '= JSON.parse(items.is_shademanagerActiveIn_world_Haus_OG_Studio_in_world_Haus_OG_Studio_ui_widget_controller.state.trim().startsWith("-") ? "{}" : items.is_shademanagerActiveIn_world_Haus_OG_Studio_in_world_Haus_OG_Studio_ui_widget_controller.state.trim().startsWith("NULL") ? "{}" : items.is_shademanagerActiveIn_world_Haus_OG_Studio_in_world_Haus_OG_Studio_ui_widget_controller.state)["room_overview__filter"]'
                                                    height: 20px
                                                    width: 20px
                                                    margin-right: 10px
                            - component: f7-accordion-content
                              config:
                                style:
                                  margin: 0px
                                  margin-top: 3px
                                  margin-left: 5px
                                  width: 100%
                              slots:
                                default:
                                  - component: f7-accordion-item
                                    config:
                                      style:
                                        display: flex
                                        flex-direction: row
                                        justify-content: space-between
                                        margin-right: 5px
                                        flex-wrap: wrap
                                    slots:
                                      default:
                                        - component: widget:shutter-lamella-v3
                                          config:
                                            title: alle
                                            itemShutter: Studio_AllShades_shutter
                                            itemLamella: Studio_AllShades_lamella
                                        - component: widget:shutter-lamella-v3
                                          config:
                                            title: links
                                            itemShutter: beschattung_verfahren_fahrt_raffstore_og_studio_links_shutter
                                            itemLamella: beschattung_verfahren_fahrt_raffstore_og_studio_links_lamella
                                        - component: widget:shutter-lamella-v3
                                          config:
                                            title: rechts
                                            itemShutter: beschattung_verfahren_fahrt_raffstore_og_studio_rechts_shutter
                                            itemLamella: beschattung_verfahren_fahrt_raffstore_og_studio_rechts_lamella
                                        - component: widget:shademanger_select
                                          config:
                                            title: Shademanager
                                            set_shademanager: set_shademanagerActiveIn_world_Haus_OG_Studio
                                            is_shademanager: is_shademanagerActiveIn_world_Haus_OG_Studio
    #-------------removed some code-lines here---------
    - component: oh-grid-row
      config: {}
      slots:
        default:
          - component: oh-grid-col
            config: {}
            slots:
              default:
                - component: f7-block
                  config:
                    style:
                      margin: 0px
                      padding: 0px
                      margin-top: 5px
                      height: 200px

In the “overview” - page I open the room-page with a button and a custom-popup class (you need a new popupclass for every button):

- component: oh-button
        config:
          action: popup
          actionPageTransition: f7-parallax
          popupOpen: .myPopupOpen_prod_world_Haus_OG_Studio_detail
          style:
            background: orange
            bottom: 0
            display: '=props.page_link == "" || props.hierarchy_link == "undefined"
              || props.page_link == Null ? "none" : ""'
            filter: opacity(0%)
            grid-column-end: 3
            grid-column-start: 2
            grid-row-end: 5
            grid-row-start: 1
            height: 100%
            left: 0
            position: absolute
            width: 100%
            z-index: 3
        slots:
          default:
          - component: f7-popup
            config:
              backdrop: true
              class: myPopupOpen_prod_world_Haus_OG_Studio_detail
              closeButton: true
              closeByBackdropClick: true
              closeOnEscape: true
              style:
                --f7-popup-tablet-height: 100%
                --f7-popup-tablet-width: 100%
                height: 100%
                left: 0px
                margin-bottom: 0px
                margin-left: 0px
                margin-right: 0px
                margin-top: 0px
                position: absolute
                top: 0px
                width: 100%
              swipeToClose: false
            slots:
              default:
              - component: widget:prod_world_Haus_OG_Studio_detail

important correction!

UI used to be superfast on any browser on ios when running on openhab version 3.1.0
now, on 3.2.0, I realize that the UI is extremely slow also on ios (all browsers).

Not sure since when, but now on 3.4.2. its again fast on iOS and still extremely slow on Android. I bought a quite fast Lenovo Tab and Openhab UI is still unusably slow (10 to 14 seconds to move from one page to another).
Its a pity that the nice UI is so slow which forces me to use the old basicUI. Also tried cometVisu which is super fast.