From fbd8b123fe62775f0bbbfd17af1bc4cbd4a4ea86 Mon Sep 17 00:00:00 2001
From: Yannick Schaus <github@schaus.net>
Date: Tue, 9 Mar 2021 20:54:56 +0100
Subject: [PATCH 01/10] Refactor routes: Move admin pages away from entry point

Load all settings pages, about, profile, and the HABot control asynchronously.
This also moves library dependencies to separate chunks, and thus reduces the
entry point by several kb if the user only accesses end-user pages,
until they go to these pages.

Signed-off-by: Yannick Schaus <github@schaus.net>
---
 bundles/org.openhab.ui/web/src/js/routes.js   | 317 +++++-------------
 .../web/src/pages/home/overview-tab.vue       |   3 +-
 2 files changed, 86 insertions(+), 234 deletions(-)

diff --git a/bundles/org.openhab.ui/web/src/js/routes.js b/bundles/org.openhab.ui/web/src/js/routes.js
index 1d2571a6bd..9f25b93f78 100644
--- a/bundles/org.openhab.ui/web/src/js/routes.js
+++ b/bundles/org.openhab.ui/web/src/js/routes.js
@@ -1,44 +1,47 @@
 import HomePage from '../pages/home.vue'
-import AboutPage from '../pages/about.vue'
 import NotFoundPage from '../pages/not-found.vue'
-
-import UserProfilePage from '../pages/profile.vue'
-
-import SitemapViewPage from '../pages/page/sitemap-view.vue'
 import PageViewPage from '../pages/page/page-view.vue'
 
-import SettingsMenuPage from '../pages/settings/settings-menu.vue'
-import ServiceSettingsPage from '../pages/settings/services/service-settings.vue'
-import AddonsListPage from '../pages/settings/addons/addons-list.vue'
-import AddonsAddPage from '../pages/settings/addons/addons-add.vue'
-import AddonsConfigureBindingPage from '../pages/settings/addons/binding-config.vue'
+const AboutPage = () => import(/* webpackChunkName: "about-page" */ '../pages/about.vue')
+const UserProfilePage = () => import(/* webpackChunkName: "profile-page" */ '../pages/profile.vue')
+
+const SettingsMenuPage = () => import(/* webpackChunkName: "admin-base" */ '../pages/settings/settings-menu.vue')
+const ServiceSettingsPage = () => import(/* webpackChunkName: "admin-base" */ '../pages/settings/services/service-settings.vue')
+const AddonsListPage = () => import(/* webpackChunkName: "admin-base" */ '../pages/settings/addons/addons-list.vue')
+const AddonsAddPage = () => import(/* webpackChunkName: "admin-base" */ '../pages/settings/addons/addons-add.vue')
+const AddonsConfigureBindingPage = () => import(/* webpackChunkName: "admin-base" */ '../pages/settings/addons/binding-config.vue')
 
-import ItemsListPage from '../pages/settings/items/items-list-vlist.vue'
-import ItemDetailsPage from '../pages/settings/items/item-details.vue'
-import ItemEditPage from '../pages/settings/items/item-edit.vue'
-import ItemsAddFromTextualDefinition from '../pages/settings/items/parser/items-add-from-textual-definition.vue'
+const ItemsListPage = () => import(/* webpackChunkName: "admin-base" */ '../pages/settings/items/items-list-vlist.vue')
+const ItemDetailsPage = () => import(/* webpackChunkName: "admin-base" */ '../pages/settings/items/item-details.vue')
+const ItemEditPage = () => import(/* webpackChunkName: "admin-base" */ '../pages/settings/items/item-edit.vue')
+const ItemMetadataEditPage = () => import(/* webpackChunkName: "metadata-edit" */ '../pages/settings/items/metadata/item-metadata-edit.vue')
+const ItemsAddFromTextualDefinition = () => import(/* webpackChunkName: "admin-base" */ '../pages/settings/items/parser/items-add-from-textual-definition.vue')
 
-import ThingsListPage from '../pages/settings/things/things-list.vue'
-import ThingDetailsPage from '../pages/settings/things/thing-details.vue'
-import AddThingChooseBindingPage from '../pages/settings/things/add/choose-binding.vue'
-import AddThingChooseThingTypePage from '../pages/settings/things/add/choose-thing-type.vue'
-import AddThingPage from '../pages/settings/things/add/thing-add.vue'
+const ThingsListPage = () => import(/* webpackChunkName: "admin-base" */ '../pages/settings/things/things-list.vue')
+const ThingDetailsPage = () => import(/* webpackChunkName: "admin-base" */ '../pages/settings/things/thing-details.vue')
+const AddThingChooseBindingPage = () => import(/* webpackChunkName: "admin-base" */ '../pages/settings/things/add/choose-binding.vue')
+const AddThingChooseThingTypePage = () => import(/* webpackChunkName: "admin-base" */ '../pages/settings/things/add/choose-thing-type.vue')
+const AddThingPage = () => import(/* webpackChunkName: "admin-base" */ '../pages/settings/things/add/thing-add.vue')
 
-import InboxListPage from '../pages/settings/things/inbox/inbox-list.vue'
+const InboxListPage = () => import(/* webpackChunkName: "admin-base" */ '../pages/settings/things/inbox/inbox-list.vue')
 
-import SemanticModelPage from '../pages/settings/model/model.vue'
+const SemanticModelPage = () => import(/* webpackChunkName: "admin-base" */ '../pages/settings/model/model.vue')
 
-import RulesListPage from '../pages/settings/rules/rules-list.vue'
+const PagesListPage = () => import(/* webpackChunkName: "admin-base" */ '../pages/settings/pages/pages-list.vue')
 
-import PagesListPage from '../pages/settings/pages/pages-list.vue'
+const RulesListPage = () => import(/* webpackChunkName: "admin-base" */ '../pages/settings/rules/rules-list.vue')
+const RuleEditPage = () => import(/* webpackChunkName: "rule-edit" */ '../pages/settings/rules/rule-edit.vue')
+const ScriptEditPage = () => import(/* webpackChunkName: "script-edit" */ '../pages/settings/rules/script/script-edit.vue')
+const SchedulePage = () => import(/* webpackChunkName: "schedule" */ '../pages/settings/schedule/schedule.vue')
 
-// import SchedulePage from '../pages/settings/schedule/schedule.vue'
+const AnalyzerPage = () => import(/* webpackChunkName: "analyzer" */ '../pages/analyzer/analyzer.vue')
 
-import Analyzer from '../pages/analyzer/analyzer.vue'
+const DeveloperToolsPage = () => import(/* webpackChunkName: "admin-base" */ '../pages/developer/developer-tools.vue')
+const WidgetsListPage = () => import(/* webpackChunkName: "admin-base" */ '../pages/developer/widgets/widget-list.vue')
+const WidgetEditPage = () => import(/* webpackChunkName: "admin-base" */ '../pages/developer/widgets/widget-edit.vue')
+const ApiExplorerPage = () => import(/* webpackChunkName: "admin-base" */ '../pages/developer/api-explorer.vue')
 
-import DeveloperToolsPage from '../pages/developer/developer-tools.vue'
-import WidgetsListPage from '../pages/developer/widgets/widget-list.vue'
-import ApiExplorerPage from '../pages/developer/api-explorer.vue'
+const SetupWizardPage = () => import(/* webpackChunkName: "setup-wizard" */ '../pages/wizards/setup-wizard.vue')
 
 const checkDirtyBeforeLeave = function (routeTo, routeFrom, resolve, reject) {
   if (this.currentPageEl && this.currentPageEl.__vue__ && this.currentPageEl.__vue__.$parent && this.currentPageEl.__vue__.$parent.beforeLeave &&
@@ -49,13 +52,24 @@ const checkDirtyBeforeLeave = function (routeTo, routeFrom, resolve, reject) {
   }
 }
 
+const loadAsync = (page, props) => {
+  return (routeTo, routeFrom, resolve, reject) => {
+    if (!props) {
+      page().then((c) => { resolve({ component: c.default }) })
+    } else if (typeof props === 'object') {
+      page().then((c) => { resolve({ component: c.default }, { props }) })
+    } else if (typeof props === 'function') {
+      page().then((c) => { resolve({ component: c.default }, { props: props(routeTo, routeFrom, resolve, reject) }) })
+    }
+  }
+}
+
 export default [
   {
     path: '/',
     component: HomePage,
     // keepAlive: true,
     options: {
-      // animate: false
       transition: 'f7-dive'
     }
   },
@@ -63,88 +77,54 @@ export default [
     path: '/page/:uid',
     component: PageViewPage
   },
-  {
-    path: '/sitemap/:sitemapId/:pageId',
-    component: SitemapViewPage
-  },
   {
     path: '/about/',
-    component: AboutPage,
+    async: loadAsync(AboutPage),
     options: {
       animate: false
     }
   },
   {
     path: '/setup-wizard/',
-    async (routeTo, routeFrom, resolve, reject) {
-      // dynamic import component; returns promise
-      const widgetEditComponent = () => import(/* webpackChunkName: "setup-wizard" */ '../pages/wizards/setup-wizard.vue')
-      // resolve promise
-      widgetEditComponent().then((vc) => {
-        // resolve with component
-        resolve({
-          component: vc.default
-        },
-        (routeTo.params.uid === 'add') ? {
-          props: {
-            createMode: true
-          }
-        } : {})
-      })
-    }
+    async: loadAsync(SetupWizardPage)
   },
   {
     path: '/profile/',
-    component: UserProfilePage,
+    async: loadAsync(UserProfilePage),
     options: {
       animate: false
     }
   },
   {
     path: '/settings/',
-    component: SettingsMenuPage,
+    async: loadAsync(SettingsMenuPage),
     keepAlive: true,
     routes: [
       {
         path: 'items',
-        component: ItemsListPage,
+        async: loadAsync(ItemsListPage),
         routes: [
           {
             path: 'add',
-            component: ItemEditPage,
-            options: {
-              props: {
-                createMode: true
-              }
-            }
+            async: loadAsync(ItemEditPage, { createMode: true })
           },
           {
             path: 'add-from-textual-definition',
-            component: ItemsAddFromTextualDefinition
+            async: loadAsync(ItemsAddFromTextualDefinition)
           },
           {
             path: ':itemName',
-            component: ItemDetailsPage,
+            async: loadAsync(ItemDetailsPage),
             routes: [
               {
                 path: 'edit',
-                component: ItemEditPage,
-                beforeLeave: checkDirtyBeforeLeave
+                beforeLeave: checkDirtyBeforeLeave,
+                async: loadAsync(ItemEditPage)
               },
               {
                 path: 'metadata/:namespace',
                 beforeLeave: checkDirtyBeforeLeave,
-                async (routeTo, routeFrom, resolve, reject) {
-                  // dynamic import component; returns promise
-                  const editorComponent = () => import(/* webpackChunkName: "metadata-edit" */ '../pages/settings/items/metadata/item-metadata-edit.vue')
-                  // resolve promise
-                  editorComponent().then((vc) => {
-                    // resolve with component
-                    resolve({
-                      component: vc.default
-                    })
-                  })
-                }
+                async: loadAsync(ItemMetadataEditPage)
               }
             ]
           }
@@ -152,54 +132,37 @@ export default [
       },
       {
         path: 'pages',
-        component: PagesListPage,
+        async: loadAsync(PagesListPage),
         routes: [
           {
             path: ':type/:uid',
             beforeLeave: checkDirtyBeforeLeave,
             async (routeTo, routeFrom, resolve, reject) {
-              // dynamic import component; returns promise
-              const editorComponent = () => import(/* webpackChunkName: "[request]" */ `../pages/settings/pages/${routeTo.params.type}/${routeTo.params.type}-edit.vue`)
-              // resolve promise
-              editorComponent().then((vc) => {
-                // resolve with component
-                resolve({
-                  component: vc.default
-                },
-                (routeTo.params.uid === 'add') ? {
-                  props: {
-                    createMode: true
-                  }
-                } : {})
-              })
+              const component = () => import(/* webpackChunkName: "[request]" */ `../pages/settings/pages/${routeTo.params.type}/${routeTo.params.type}-edit.vue`)
+              component().then((c) => { resolve({ component: c.default }, (routeTo.params.uid === 'add') ? { props: { createMode: true } } : {}) })
             }
           }
         ]
       },
       {
         path: 'things/',
-        component: ThingsListPage,
+        async: loadAsync(ThingsListPage),
         routes: [
           {
             path: 'add',
-            component: AddThingChooseBindingPage,
+            async: loadAsync(AddThingChooseBindingPage),
             routes: [
               {
                 path: 'install-binding',
-                component: AddonsAddPage,
-                options: {
-                  props: {
-                    addonType: 'binding'
-                  }
-                }
+                async: loadAsync(AddonsAddPage, { addonType: 'binding' })
               },
               {
                 path: ':bindingId',
-                component: AddThingChooseThingTypePage,
+                async: loadAsync(AddThingChooseThingTypePage),
                 routes: [
                   {
                     path: ':thingTypeId',
-                    component: AddThingPage
+                    async: loadAsync(AddThingPage)
                   }
                 ]
               }
@@ -207,75 +170,32 @@ export default [
           },
           {
             path: 'inbox',
-            component: InboxListPage
+            async: loadAsync(InboxListPage)
           },
           {
             path: ':thingId',
-            component: ThingDetailsPage,
-            beforeLeave: checkDirtyBeforeLeave
+            beforeLeave: checkDirtyBeforeLeave,
+            async: loadAsync(ThingDetailsPage)
           }
         ]
       },
       {
         path: 'model',
-        component: SemanticModelPage
-        // keepAlive: true
-        // routes: [
-        //   {
-        //     path: ':itemName',
-        //     component: ItemDetailsPage,
-        //     routes: [
-        //       {
-        //         path: 'edit',
-        //         component: ItemEditPage
-        //       }
-        //     ]
-        //   }
-        // ]
+        async: loadAsync(SemanticModelPage)
       },
       {
         path: 'rules/',
-        component: RulesListPage,
+        async: loadAsync(RulesListPage),
         routes: [
           {
             path: ':ruleId',
             beforeLeave: checkDirtyBeforeLeave,
-            async (routeTo, routeFrom, resolve, reject) {
-              // dynamic import component; returns promise
-              const ruleEditComponent = () => import(/* webpackChunkName: "rule-edit" */ '../pages/settings/rules/rule-edit.vue')
-              // resolve promise
-              ruleEditComponent().then((vc) => {
-                // resolve with component
-                resolve({
-                  component: vc.default
-                },
-                (routeTo.params.ruleId === 'add') ? {
-                  props: {
-                    createMode: true
-                  }
-                } : {})
-              })
-            },
+            async: loadAsync(RuleEditPage, (routeTo) => (routeTo.params.ruleId === 'add') ? { createMode: true } : {}),
             routes: [
               {
                 path: 'script/:moduleId',
                 beforeLeave: checkDirtyBeforeLeave,
-                async (routeTo, routeFrom, resolve, reject) {
-                  // dynamic import component; returns promise
-                  const ruleEditComponent = () => import(/* webpackChunkName: "rule-script-edit" */ '../pages/settings/rules/script/script-edit.vue')
-                  // resolve promise
-                  ruleEditComponent().then((vc) => {
-                    // resolve with component
-                    resolve({
-                      component: vc.default
-                    },
-                    (routeTo.params.ruleId === 'add') ? {
-                      props: {
-                        createMode: true
-                      }
-                    } : {})
-                  })
-                }
+                async: loadAsync(ScriptEditPage, (routeTo) => (routeTo.params.ruleId === 'add') ? { createMode: true } : {})
               }
             ]
           }
@@ -283,143 +203,76 @@ export default [
       },
       {
         path: 'scripts/',
-        component: RulesListPage,
-        options: {
-          props: {
-            showScripts: true
-          }
-        },
+        async: loadAsync(RulesListPage, { showScripts: true }),
         routes: [
           {
             path: ':ruleId',
             beforeLeave: checkDirtyBeforeLeave,
-            async (routeTo, routeFrom, resolve, reject) {
-              // dynamic import component; returns promise
-              const ruleEditComponent = () => import(/* webpackChunkName: "script-edit" */ '../pages/settings/rules/script/script-edit.vue')
-              // resolve promise
-              ruleEditComponent().then((vc) => {
-                // resolve with component
-                resolve({
-                  component: vc.default
-                },
-                (routeTo.params.ruleId === 'add') ? {
-                  props: {
-                    createMode: true
-                  }
-                } : {})
-              })
-            }
+            async: loadAsync(ScriptEditPage, (routeTo) => (routeTo.params.ruleId === 'add') ? { createMode: true } : {})
           }
         ]
       },
       {
         path: 'schedule/',
-        async (routeTo, routeFrom, resolve, reject) {
-          // dynamic import component; returns promise
-          const scheduleComponent = () => import(/* webpackChunkName: "schedule" */ '../pages/settings/schedule/schedule.vue')
-          // resolve promise
-          scheduleComponent().then((vc) => {
-            // resolve with component
-            resolve({
-              component: vc.default
-            })
-          })
-        },
+        async: loadAsync(SchedulePage),
         routes: [
           {
             path: 'add',
             beforeLeave: checkDirtyBeforeLeave,
-            async (routeTo, routeFrom, resolve, reject) {
-              // dynamic import component; returns promise
-              const ruleEditComponent = () => import(/* webpackChunkName: "rule-edit" */ '../pages/settings/rules/rule-edit.vue')
-              // resolve promise
-              ruleEditComponent().then((vc) => {
-                // resolve with component
-                resolve({
-                  component: vc.default
-                }, {
-                  props: {
-                    createMode: true,
-                    schedule: true
-                  }
-                })
-              })
-            }
+            async: loadAsync(RuleEditPage, { createMode: true, schedule: true })
           }
         ]
       },
-      // {
-      //   path: 'inbox/',
-      //   component: InboxListPage
-      // },
       {
         path: 'addons/:addonType',
-        component: AddonsListPage,
+        async: loadAsync(AddonsListPage),
         routes: [
           {
             path: 'add',
-            component: AddonsAddPage
+            async: loadAsync(AddonsAddPage)
           },
           {
             path: ':bindingId/config',
-            component: AddonsConfigureBindingPage
+            async: loadAsync(AddonsConfigureBindingPage)
           }
         ]
       },
       {
         path: 'services/:serviceId',
-        component: ServiceSettingsPage,
-        beforeLeave: checkDirtyBeforeLeave
+        beforeLeave: checkDirtyBeforeLeave,
+        async: loadAsync(ServiceSettingsPage)
       }
     ]
   },
   {
     path: '/developer/',
-    component: DeveloperToolsPage,
-    options: {
-      animate: false
-    },
+    async: loadAsync(DeveloperToolsPage),
     routes: [
       {
         path: 'widgets/',
-        component: WidgetsListPage,
+        async: loadAsync(WidgetsListPage),
         routes: [
           {
             path: ':uid',
             beforeLeave: checkDirtyBeforeLeave,
-            async (routeTo, routeFrom, resolve, reject) {
-              // dynamic import component; returns promise
-              const widgetEditComponent = () => import(/* webpackChunkName: "widget-edit" */ '../pages/developer/widgets/widget-edit.vue')
-              // resolve promise
-              widgetEditComponent().then((vc) => {
-                // resolve with component
-                resolve({
-                  component: vc.default
-                },
-                (routeTo.params.uid === 'add') ? {
-                  props: {
-                    createMode: true
-                  }
-                } : {})
-              })
-            }
+            async: loadAsync(WidgetEditPage, (routeTo) => (routeTo.params.uid === 'add') ? { createMode: true } : {})
           }
         ]
       },
       {
         path: 'add-items-dsl',
-        component: ItemsAddFromTextualDefinition
+        async: loadAsync(ItemsAddFromTextualDefinition)
       },
       {
         path: 'api-explorer',
-        component: ApiExplorerPage
+        async: loadAsync(ApiExplorerPage)
       }
     ]
   },
   {
     path: '/analyzer/',
-    popup: {
-      component: Analyzer
+    async (routeTo, routeFrom, resolve, reject) {
+      AnalyzerPage().then((c) => { resolve({ popup: { component: c.default } }) })
     }
   },
   /* For Cordova */
diff --git a/bundles/org.openhab.ui/web/src/pages/home/overview-tab.vue b/bundles/org.openhab.ui/web/src/pages/home/overview-tab.vue
index 25c32acf2e..4c7cb9a208 100644
--- a/bundles/org.openhab.ui/web/src/pages/home/overview-tab.vue
+++ b/bundles/org.openhab.ui/web/src/pages/home/overview-tab.vue
@@ -47,13 +47,12 @@
 // import OtherApps from '../../components/home/other-apps.vue'
 
 import OhLayoutPage from '@/components/widgets/layout/oh-layout-page.vue'
-import Habot from '../../components/home/habot.vue'
 
 export default {
   props: ['context', 'allowChat'],
   components: {
     OhLayoutPage,
-    Habot
+    'habot': () => import(/* webpackChunkName: "habot" */ '../../components/home/habot.vue')
   },
   data () {
     return {

From e581fb1360de39be872af6cd229cb85fe83f3022 Mon Sep 17 00:00:00 2001
From: Yannick Schaus <github@schaus.net>
Date: Tue, 9 Mar 2021 21:09:19 +0100
Subject: [PATCH 02/10] Put ALL admin pages in one chunk to avoid duplications

Signed-off-by: Yannick Schaus <github@schaus.net>
---
 bundles/org.openhab.ui/web/src/js/routes.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/bundles/org.openhab.ui/web/src/js/routes.js b/bundles/org.openhab.ui/web/src/js/routes.js
index 9f25b93f78..3a20ac666b 100644
--- a/bundles/org.openhab.ui/web/src/js/routes.js
+++ b/bundles/org.openhab.ui/web/src/js/routes.js
@@ -14,7 +14,7 @@ const AddonsConfigureBindingPage = () => import(/* webpackChunkName: "admin-base
 const ItemsListPage = () => import(/* webpackChunkName: "admin-base" */ '../pages/settings/items/items-list-vlist.vue')
 const ItemDetailsPage = () => import(/* webpackChunkName: "admin-base" */ '../pages/settings/items/item-details.vue')
 const ItemEditPage = () => import(/* webpackChunkName: "admin-base" */ '../pages/settings/items/item-edit.vue')
-const ItemMetadataEditPage = () => import(/* webpackChunkName: "metadata-edit" */ '../pages/settings/items/metadata/item-metadata-edit.vue')
+const ItemMetadataEditPage = () => import(/* webpackChunkName: "admin-base" */ '../pages/settings/items/metadata/item-metadata-edit.vue')
 const ItemsAddFromTextualDefinition = () => import(/* webpackChunkName: "admin-base" */ '../pages/settings/items/parser/items-add-from-textual-definition.vue')
 
 const ThingsListPage = () => import(/* webpackChunkName: "admin-base" */ '../pages/settings/things/things-list.vue')
@@ -30,9 +30,9 @@ const SemanticModelPage = () => import(/* webpackChunkName: "admin-base" */ '../
 const PagesListPage = () => import(/* webpackChunkName: "admin-base" */ '../pages/settings/pages/pages-list.vue')
 
 const RulesListPage = () => import(/* webpackChunkName: "admin-base" */ '../pages/settings/rules/rules-list.vue')
-const RuleEditPage = () => import(/* webpackChunkName: "rule-edit" */ '../pages/settings/rules/rule-edit.vue')
-const ScriptEditPage = () => import(/* webpackChunkName: "script-edit" */ '../pages/settings/rules/script/script-edit.vue')
-const SchedulePage = () => import(/* webpackChunkName: "schedule" */ '../pages/settings/schedule/schedule.vue')
+const RuleEditPage = () => import(/* webpackChunkName: "admin-base" */ '../pages/settings/rules/rule-edit.vue')
+const ScriptEditPage = () => import(/* webpackChunkName: "admin-base" */ '../pages/settings/rules/script/script-edit.vue')
+const SchedulePage = () => import(/* webpackChunkName: "admin-base" */ '../pages/settings/schedule/schedule.vue')
 
 const AnalyzerPage = () => import(/* webpackChunkName: "analyzer" */ '../pages/analyzer/analyzer.vue')
 

From e2fb0597a486710f4f3e02eed732131444412607 Mon Sep 17 00:00:00 2001
From: Yannick Schaus <github@schaus.net>
Date: Tue, 9 Mar 2021 21:20:00 +0100
Subject: [PATCH 03/10] Move page editors back to admin-base chunk

Signed-off-by: Yannick Schaus <github@schaus.net>
---
 bundles/org.openhab.ui/web/src/js/routes.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/bundles/org.openhab.ui/web/src/js/routes.js b/bundles/org.openhab.ui/web/src/js/routes.js
index 3a20ac666b..175fd828c2 100644
--- a/bundles/org.openhab.ui/web/src/js/routes.js
+++ b/bundles/org.openhab.ui/web/src/js/routes.js
@@ -138,7 +138,7 @@ export default [
             path: ':type/:uid',
             beforeLeave: checkDirtyBeforeLeave,
             async (routeTo, routeFrom, resolve, reject) {
-              const component = () => import(/* webpackChunkName: "[request]" */ `../pages/settings/pages/${routeTo.params.type}/${routeTo.params.type}-edit.vue`)
+              const component = () => import(/* webpackChunkName: "admin-base" */ `../pages/settings/pages/${routeTo.params.type}/${routeTo.params.type}-edit.vue`)
               component().then((c) => { resolve({ component: c.default }, (routeTo.params.uid === 'add') ? { props: { createMode: true } } : {}) })
             }
           }

From c408d67bef3453c7c339be0f23363150949ff958 Mon Sep 17 00:00:00 2001
From: Yannick Schaus <github@schaus.net>
Date: Tue, 9 Mar 2021 21:45:48 +0100
Subject: [PATCH 04/10] Explicitely import page editors, schedule in own chunk

Signed-off-by: Yannick Schaus <github@schaus.net>
---
 bundles/org.openhab.ui/web/src/js/routes.js | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/bundles/org.openhab.ui/web/src/js/routes.js b/bundles/org.openhab.ui/web/src/js/routes.js
index 175fd828c2..af5d034f46 100644
--- a/bundles/org.openhab.ui/web/src/js/routes.js
+++ b/bundles/org.openhab.ui/web/src/js/routes.js
@@ -28,11 +28,19 @@ const InboxListPage = () => import(/* webpackChunkName: "admin-base" */ '../page
 const SemanticModelPage = () => import(/* webpackChunkName: "admin-base" */ '../pages/settings/model/model.vue')
 
 const PagesListPage = () => import(/* webpackChunkName: "admin-base" */ '../pages/settings/pages/pages-list.vue')
+const PageEditors = {
+  layout: () => import(/* webpackChunkName: "admin-base" */ '../pages/settings/pages/layout/layout-edit.vue'),
+  tabs: () => import(/* webpackChunkName: "admin-base" */ '../pages/settings/pages/tabs/tabs-edit.vue'),
+  map: () => import(/* webpackChunkName: "admin-base" */ '../pages/settings/pages/map/map-edit.vue'),
+  plan: () => import(/* webpackChunkName: "admin-base" */ '../pages/settings/pages/plan/plan-edit.vue'),
+  chart: () => import(/* webpackChunkName: "admin-base" */ '../pages/settings/pages/chart/chart-edit.vue'),
+  sitemap: () => import(/* webpackChunkName: "admin-base" */ '../pages/settings/pages/sitemap/sitemap-edit.vue')
+}
 
 const RulesListPage = () => import(/* webpackChunkName: "admin-base" */ '../pages/settings/rules/rules-list.vue')
 const RuleEditPage = () => import(/* webpackChunkName: "admin-base" */ '../pages/settings/rules/rule-edit.vue')
 const ScriptEditPage = () => import(/* webpackChunkName: "admin-base" */ '../pages/settings/rules/script/script-edit.vue')
-const SchedulePage = () => import(/* webpackChunkName: "admin-base" */ '../pages/settings/schedule/schedule.vue')
+const SchedulePage = () => import(/* webpackChunkName: "admin-schedule" */ '../pages/settings/schedule/schedule.vue')
 
 const AnalyzerPage = () => import(/* webpackChunkName: "analyzer" */ '../pages/analyzer/analyzer.vue')
 
@@ -138,8 +146,7 @@ export default [
             path: ':type/:uid',
             beforeLeave: checkDirtyBeforeLeave,
             async (routeTo, routeFrom, resolve, reject) {
-              const component = () => import(/* webpackChunkName: "admin-base" */ `../pages/settings/pages/${routeTo.params.type}/${routeTo.params.type}-edit.vue`)
-              component().then((c) => { resolve({ component: c.default }, (routeTo.params.uid === 'add') ? { props: { createMode: true } } : {}) })
+              PageEditors[routeTo.params.type]().then((c) => { resolve({ component: c.default }, (routeTo.params.uid === 'add') ? { props: { createMode: true } } : {}) })
             }
           }
         ]

From e76aee34e5bca35bc12080b47765d7d1dcb2e120 Mon Sep 17 00:00:00 2001
From: Yannick Schaus <github@schaus.net>
Date: Tue, 9 Mar 2021 22:14:45 +0100
Subject: [PATCH 05/10] Add home page editor again

Signed-off-by: Yannick Schaus <github@schaus.net>
---
 bundles/org.openhab.ui/web/src/js/routes.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/bundles/org.openhab.ui/web/src/js/routes.js b/bundles/org.openhab.ui/web/src/js/routes.js
index af5d034f46..3729f6c1e5 100644
--- a/bundles/org.openhab.ui/web/src/js/routes.js
+++ b/bundles/org.openhab.ui/web/src/js/routes.js
@@ -29,6 +29,7 @@ const SemanticModelPage = () => import(/* webpackChunkName: "admin-base" */ '../
 
 const PagesListPage = () => import(/* webpackChunkName: "admin-base" */ '../pages/settings/pages/pages-list.vue')
 const PageEditors = {
+  home: () => import(/* webpackChunkName: "admin-base" */ '../pages/settings/pages/home/home-edit.vue'),
   layout: () => import(/* webpackChunkName: "admin-base" */ '../pages/settings/pages/layout/layout-edit.vue'),
   tabs: () => import(/* webpackChunkName: "admin-base" */ '../pages/settings/pages/tabs/tabs-edit.vue'),
   map: () => import(/* webpackChunkName: "admin-base" */ '../pages/settings/pages/map/map-edit.vue'),

From 717962737890d48dc0ac4a6027db57596e1ee85a Mon Sep 17 00:00:00 2001
From: Yannick Schaus <github@schaus.net>
Date: Tue, 9 Mar 2021 23:29:19 +0100
Subject: [PATCH 06/10] Try isolating logic sections in admin chunk

Signed-off-by: Yannick Schaus <github@schaus.net>
---
 bundles/org.openhab.ui/web/src/js/routes.js | 56 ++++++++++-----------
 1 file changed, 28 insertions(+), 28 deletions(-)

diff --git a/bundles/org.openhab.ui/web/src/js/routes.js b/bundles/org.openhab.ui/web/src/js/routes.js
index 3729f6c1e5..a7e7c99100 100644
--- a/bundles/org.openhab.ui/web/src/js/routes.js
+++ b/bundles/org.openhab.ui/web/src/js/routes.js
@@ -11,44 +11,44 @@ const AddonsListPage = () => import(/* webpackChunkName: "admin-base" */ '../pag
 const AddonsAddPage = () => import(/* webpackChunkName: "admin-base" */ '../pages/settings/addons/addons-add.vue')
 const AddonsConfigureBindingPage = () => import(/* webpackChunkName: "admin-base" */ '../pages/settings/addons/binding-config.vue')
 
-const ItemsListPage = () => import(/* webpackChunkName: "admin-base" */ '../pages/settings/items/items-list-vlist.vue')
-const ItemDetailsPage = () => import(/* webpackChunkName: "admin-base" */ '../pages/settings/items/item-details.vue')
-const ItemEditPage = () => import(/* webpackChunkName: "admin-base" */ '../pages/settings/items/item-edit.vue')
-const ItemMetadataEditPage = () => import(/* webpackChunkName: "admin-base" */ '../pages/settings/items/metadata/item-metadata-edit.vue')
-const ItemsAddFromTextualDefinition = () => import(/* webpackChunkName: "admin-base" */ '../pages/settings/items/parser/items-add-from-textual-definition.vue')
+const ItemsListPage = () => import(/* webpackChunkName: "admin-config" */ '../pages/settings/items/items-list-vlist.vue')
+const ItemDetailsPage = () => import(/* webpackChunkName: "admin-config" */ '../pages/settings/items/item-details.vue')
+const ItemEditPage = () => import(/* webpackChunkName: "admin-config" */ '../pages/settings/items/item-edit.vue')
+const ItemMetadataEditPage = () => import(/* webpackChunkName: "admin-config" */ '../pages/settings/items/metadata/item-metadata-edit.vue')
+const ItemsAddFromTextualDefinition = () => import(/* webpackChunkName: "admin-config" */ '../pages/settings/items/parser/items-add-from-textual-definition.vue')
 
-const ThingsListPage = () => import(/* webpackChunkName: "admin-base" */ '../pages/settings/things/things-list.vue')
-const ThingDetailsPage = () => import(/* webpackChunkName: "admin-base" */ '../pages/settings/things/thing-details.vue')
-const AddThingChooseBindingPage = () => import(/* webpackChunkName: "admin-base" */ '../pages/settings/things/add/choose-binding.vue')
-const AddThingChooseThingTypePage = () => import(/* webpackChunkName: "admin-base" */ '../pages/settings/things/add/choose-thing-type.vue')
-const AddThingPage = () => import(/* webpackChunkName: "admin-base" */ '../pages/settings/things/add/thing-add.vue')
+const ThingsListPage = () => import(/* webpackChunkName: "admin-config" */ '../pages/settings/things/things-list.vue')
+const ThingDetailsPage = () => import(/* webpackChunkName: "admin-config" */ '../pages/settings/things/thing-details.vue')
+const AddThingChooseBindingPage = () => import(/* webpackChunkName: "admin-config" */ '../pages/settings/things/add/choose-binding.vue')
+const AddThingChooseThingTypePage = () => import(/* webpackChunkName: "admin-config" */ '../pages/settings/things/add/choose-thing-type.vue')
+const AddThingPage = () => import(/* webpackChunkName: "admin-config" */ '../pages/settings/things/add/thing-add.vue')
 
-const InboxListPage = () => import(/* webpackChunkName: "admin-base" */ '../pages/settings/things/inbox/inbox-list.vue')
+const InboxListPage = () => import(/* webpackChunkName: "admin-config" */ '../pages/settings/things/inbox/inbox-list.vue')
 
-const SemanticModelPage = () => import(/* webpackChunkName: "admin-base" */ '../pages/settings/model/model.vue')
+const SemanticModelPage = () => import(/* webpackChunkName: "admin-config" */ '../pages/settings/model/model.vue')
 
-const PagesListPage = () => import(/* webpackChunkName: "admin-base" */ '../pages/settings/pages/pages-list.vue')
+const PagesListPage = () => import(/* webpackChunkName: "admin-pages" */ '../pages/settings/pages/pages-list.vue')
 const PageEditors = {
-  home: () => import(/* webpackChunkName: "admin-base" */ '../pages/settings/pages/home/home-edit.vue'),
-  layout: () => import(/* webpackChunkName: "admin-base" */ '../pages/settings/pages/layout/layout-edit.vue'),
-  tabs: () => import(/* webpackChunkName: "admin-base" */ '../pages/settings/pages/tabs/tabs-edit.vue'),
-  map: () => import(/* webpackChunkName: "admin-base" */ '../pages/settings/pages/map/map-edit.vue'),
-  plan: () => import(/* webpackChunkName: "admin-base" */ '../pages/settings/pages/plan/plan-edit.vue'),
-  chart: () => import(/* webpackChunkName: "admin-base" */ '../pages/settings/pages/chart/chart-edit.vue'),
-  sitemap: () => import(/* webpackChunkName: "admin-base" */ '../pages/settings/pages/sitemap/sitemap-edit.vue')
+  home: () => import(/* webpackChunkName: "admin-pages" */ '../pages/settings/pages/home/home-edit.vue'),
+  layout: () => import(/* webpackChunkName: "admin-pages" */ '../pages/settings/pages/layout/layout-edit.vue'),
+  tabs: () => import(/* webpackChunkName: "admin-pages" */ '../pages/settings/pages/tabs/tabs-edit.vue'),
+  map: () => import(/* webpackChunkName: "admin-pages-leaflet" */ '../pages/settings/pages/map/map-edit.vue'),
+  plan: () => import(/* webpackChunkName: "admin-pages-leaflet" */ '../pages/settings/pages/plan/plan-edit.vue'),
+  chart: () => import(/* webpackChunkName: "admin-pages-echarts" */ '../pages/settings/pages/chart/chart-edit.vue'),
+  sitemap: () => import(/* webpackChunkName: "admin-pages" */ '../pages/settings/pages/sitemap/sitemap-edit.vue')
 }
 
-const RulesListPage = () => import(/* webpackChunkName: "admin-base" */ '../pages/settings/rules/rules-list.vue')
-const RuleEditPage = () => import(/* webpackChunkName: "admin-base" */ '../pages/settings/rules/rule-edit.vue')
-const ScriptEditPage = () => import(/* webpackChunkName: "admin-base" */ '../pages/settings/rules/script/script-edit.vue')
-const SchedulePage = () => import(/* webpackChunkName: "admin-schedule" */ '../pages/settings/schedule/schedule.vue')
+const RulesListPage = () => import(/* webpackChunkName: "admin-rules" */ '../pages/settings/rules/rules-list.vue')
+const RuleEditPage = () => import(/* webpackChunkName: "admin-rules" */ '../pages/settings/rules/rule-edit.vue')
+const ScriptEditPage = () => import(/* webpackChunkName: "admin-rules" */ '../pages/settings/rules/script/script-edit.vue')
+const SchedulePage = () => import(/* webpackChunkName: "admin-rules" */ '../pages/settings/schedule/schedule.vue')
 
 const AnalyzerPage = () => import(/* webpackChunkName: "analyzer" */ '../pages/analyzer/analyzer.vue')
 
-const DeveloperToolsPage = () => import(/* webpackChunkName: "admin-base" */ '../pages/developer/developer-tools.vue')
-const WidgetsListPage = () => import(/* webpackChunkName: "admin-base" */ '../pages/developer/widgets/widget-list.vue')
-const WidgetEditPage = () => import(/* webpackChunkName: "admin-base" */ '../pages/developer/widgets/widget-edit.vue')
-const ApiExplorerPage = () => import(/* webpackChunkName: "admin-base" */ '../pages/developer/api-explorer.vue')
+const DeveloperToolsPage = () => import(/* webpackChunkName: "admin-devtools" */ '../pages/developer/developer-tools.vue')
+const WidgetsListPage = () => import(/* webpackChunkName: "admin-devtools" */ '../pages/developer/widgets/widget-list.vue')
+const WidgetEditPage = () => import(/* webpackChunkName: "admin-devtools" */ '../pages/developer/widgets/widget-edit.vue')
+const ApiExplorerPage = () => import(/* webpackChunkName: "admin-devtools" */ '../pages/developer/api-explorer.vue')
 
 const SetupWizardPage = () => import(/* webpackChunkName: "setup-wizard" */ '../pages/wizards/setup-wizard.vue')
 

From 97bdc235b52bde919074db84bed661ab768c2ba5 Mon Sep 17 00:00:00 2001
From: Yannick Schaus <github@schaus.net>
Date: Wed, 10 Mar 2021 13:34:50 +0100
Subject: [PATCH 07/10] Prevent the location popup, cron expression popup to
 load early

Put the scheduler in its own chunk again

Signed-off-by: Yannick Schaus <github@schaus.net>
---
 .../config/controls/location-picker-popup.vue | 70 ++++++++++++++++
 .../config/controls/location-picker.vue       | 80 ++++++-------------
 .../controls/parameter-cronexpression.vue     | 37 ++++-----
 .../config/controls/parameter-location.vue    | 14 ++--
 bundles/org.openhab.ui/web/src/js/routes.js   |  2 +-
 .../src/pages/settings/rules/rule-edit.vue    | 41 +++++-----
 6 files changed, 140 insertions(+), 104 deletions(-)
 create mode 100644 bundles/org.openhab.ui/web/src/components/config/controls/location-picker-popup.vue

diff --git a/bundles/org.openhab.ui/web/src/components/config/controls/location-picker-popup.vue b/bundles/org.openhab.ui/web/src/components/config/controls/location-picker-popup.vue
new file mode 100644
index 0000000000..ad96a9dcfa
--- /dev/null
+++ b/bundles/org.openhab.ui/web/src/components/config/controls/location-picker-popup.vue
@@ -0,0 +1,70 @@
+<template>
+  <f7-popup ref="mapPicker" class="mappicker-popup" @popup:open="mapPickerOpen" @popup:closed="mapPickerClosed">
+    <f7-page>
+      <f7-navbar>
+        <f7-nav-left>
+          <f7-link icon-ios="f7:arrow_left" icon-md="material:arrow_back" icon-aurora="f7:arrow_left" popup-close />
+        </f7-nav-left>
+        <f7-nav-title>{{ title }}</f7-nav-title>
+        <f7-nav-right>
+          <f7-link class="popup-close" @click="updateValue(currentPosition)">
+            Done
+          </f7-link>
+        </f7-nav-right>
+      </f7-navbar>
+
+      <location-picker v-if="showMap" :value="currentPosition" @input="updatePosition" />
+    </f7-page>
+  </f7-popup>
+</template>
+
+<style lang="stylus">
+.mappicker-popup .oh-map-picker-lmap
+  background-color var(--f7-page-bg-color)
+  &.leaflet-grab
+    cursor crosshair
+.leaflet-dragging .oh-map-picker-lmap.leaflet-grab
+  cursor grabbing !important
+</style>
+
+<script>
+export default {
+  props: ['value', 'title'],
+  components: {
+    'location-picker': () => import(/* webpackChunkName: "location-picker" */ './location-picker.vue')
+  },
+  data () {
+    return {
+      showMap: false,
+      currentPosition: null
+    }
+  },
+  watch: {
+    value (val) {
+      this.currentPosition = val
+    }
+  },
+  methods: {
+    updateValue () {
+      if (this.currentPosition) {
+        this.$f7.emit('locationUpdate', this.currentPosition)
+      }
+    },
+    updatePosition (event) {
+      if (event.lat && event.lng) {
+        this.currentPosition = [event.lat, event.lng].join(',')
+      }
+    },
+    mapPickerClosed () {
+      this.showMap = false
+      this.$f7.emit('locationPickerClosed')
+    },
+    mapPickerOpen () {
+      this.currentPosition = this.value
+      this.$nextTick(() => {
+        this.showMap = true
+      })
+    }
+  }
+}
+</script>
diff --git a/bundles/org.openhab.ui/web/src/components/config/controls/location-picker.vue b/bundles/org.openhab.ui/web/src/components/config/controls/location-picker.vue
index ab10fbb52f..7df95c5191 100644
--- a/bundles/org.openhab.ui/web/src/components/config/controls/location-picker.vue
+++ b/bundles/org.openhab.ui/web/src/components/config/controls/location-picker.vue
@@ -1,43 +1,19 @@
 <template>
-  <f7-popup ref="mapPicker" class="mappicker-popup" @popup:opened="mapPickerOpened" @popup:closed="mapPickerClosed">
-    <f7-page>
-      <f7-navbar>
-        <f7-nav-left>
-          <f7-link icon-ios="f7:arrow_left" icon-md="material:arrow_back" icon-aurora="f7:arrow_left" popup-close />
-        </f7-nav-left>
-        <f7-nav-title>{{ title }}</f7-nav-title>
-        <f7-nav-right>
-          <f7-link class="popup-close" @click="updateValue(marker)">
-            Done
-          </f7-link>
-        </f7-nav-right>
-      </f7-navbar>
-
-      <l-map
-        v-if="showMap"
-        :zoom="zoom"
-        :center="center"
-        :options="mapOptions"
-        @click="mapClicked"
-        class="oh-map-picker-lmap">
-        <l-tile-layer
-          :url="url"
-          :attribution="attribution" />
-        <l-marker v-if="marker" :lat-lng="marker" />
-      </l-map>
-    </f7-page>
-  </f7-popup>
+  <l-map
+    v-if="showMap"
+    :zoom="zoom"
+    :center="center"
+    :options="mapOptions"
+    @click="mapClicked"
+    ref="map"
+    class="oh-map-picker-lmap">
+    <l-tile-layer
+      :url="url"
+      :attribution="attribution" />
+    <l-marker v-if="marker" :lat-lng="marker" />
+  </l-map>
 </template>
 
-<style lang="stylus">
-.mappicker-popup .oh-map-picker-lmap
-  background-color var(--f7-page-bg-color)
-  &.leaflet-grab
-    cursor crosshair
-.leaflet-dragging .oh-map-picker-lmap.leaflet-grab
-  cursor grabbing !important
-</style>
-
 <script>
 import { latLng, Icon } from 'leaflet'
 import { LMap, LTileLayer, LMarker } from 'vue2-leaflet'
@@ -51,7 +27,7 @@ Icon.Default.mergeOptions({
 })
 
 export default {
-  props: ['value', 'title'],
+  props: ['value'],
   components: {
     LMap,
     LTileLayer,
@@ -59,38 +35,30 @@ export default {
   },
   data () {
     return {
+      showMap: false,
       zoom: 4,
       center: latLng(48, 6),
       // url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
       url: `https://a.basemaps.cartocdn.com/${this.$f7.data.themeOptions.dark}_all/{z}/{x}/{y}.png`,
       attribution: '&copy; <a class="external" target="_blank" href="http://osm.org/copyright">OpenStreetMap</a>, &copy; <a class="external" target="_blank" href="https://carto.com/attribution/">CARTO</a>',
       marker: null,
-      showMap: false,
       mapOptions: {
         zoomSnap: 0.5
       }
     }
   },
+  mounted () {
+    this.$nextTick(() => {
+      this.zoom = (this.value) ? 13 : 4
+      this.marker = (this.value) ? latLng(this.value.split(',')) : null
+      this.center = (this.value) ? latLng(this.value.split(',')) : latLng(48, 6)
+      this.showMap = true
+    })
+  },
   methods: {
-    updateValue (marker) {
-      if (marker.lat && marker.lng) {
-        this.$f7.emit('locationUpdate', marker)
-      }
-    },
-    mapPickerClosed () {
-      this.showMap = false
-      this.$f7.emit('locationPickerClosed')
-    },
     mapClicked (evt) {
       this.marker = latLng(evt.latlng)
-    },
-    mapPickerOpened () {
-      this.$nextTick(() => {
-        this.zoom = (this.value) ? 13 : 4
-        this.marker = (this.value) ? latLng(this.value.split(',')) : null
-        this.center = (this.value) ? latLng(this.value.split(',')) : latLng(48, 6)
-        this.showMap = true
-      })
+      this.$emit('input', this.marker)
     }
   }
 }
diff --git a/bundles/org.openhab.ui/web/src/components/config/controls/parameter-cronexpression.vue b/bundles/org.openhab.ui/web/src/components/config/controls/parameter-cronexpression.vue
index e68fb2df58..5b1b8e93ba 100644
--- a/bundles/org.openhab.ui/web/src/components/config/controls/parameter-cronexpression.vue
+++ b/bundles/org.openhab.ui/web/src/components/config/controls/parameter-cronexpression.vue
@@ -24,7 +24,6 @@
 </template>
 
 <script>
-import CronEditorPopup from './cronexpression-editor.vue'
 import cronstrue from 'cronstrue'
 
 export default {
@@ -38,25 +37,27 @@ export default {
       this.$emit('input', value)
     },
     openPopup () {
-      const popup = {
-        component: CronEditorPopup
-      }
-
-      this.$f7router.navigate({
-        url: 'widget-code',
-        route: {
-          path: 'widget-code',
-          popup
+      import(/* webpackChunkName: cronexpression-editor */ '@/components/config/controls/cronexpression-editor.vue').then((c) => {
+        const popup = {
+          component: c.default
         }
-      }, {
-        props: {
-          value: this.value
-        }
-      })
 
-      this.$f7.once('cronEditorUpdate', this.updateValue)
-      this.$f7.once('cronEditorClosed', () => {
-        this.$f7.off('cronEditorUpdate', this.updateValue)
+        this.$f7router.navigate({
+          url: 'cron-edit',
+          route: {
+            path: 'cron-edit',
+            popup
+          }
+        }, {
+          props: {
+            value: this.value
+          }
+        })
+
+        this.$f7.once('cronEditorUpdate', this.updateValue)
+        this.$f7.once('cronEditorClosed', () => {
+          this.$f7.off('cronEditorUpdate', this.updateValue)
+        })
       })
     }
   },
diff --git a/bundles/org.openhab.ui/web/src/components/config/controls/parameter-location.vue b/bundles/org.openhab.ui/web/src/components/config/controls/parameter-location.vue
index 1ea1a74b52..9abf4a9cd2 100644
--- a/bundles/org.openhab.ui/web/src/components/config/controls/parameter-location.vue
+++ b/bundles/org.openhab.ui/web/src/components/config/controls/parameter-location.vue
@@ -8,7 +8,7 @@
       :placeholder="placeholder"
       :required="configDescription.required" validate
       :clear-button="!configDescription.required"
-      @input="updateValue"
+      @input="(ev) => updateValue(ev.target.value)"
       type="text">
       <div class="padding-left" slot="content-end">
         <f7-button slot="content-end" @click="openMapPicker">
@@ -23,21 +23,17 @@
 </style>
 
 <script>
-import LocationPicker from './location-picker.vue'
+import LocationPickerPopup from './location-picker-popup.vue'
 
 export default {
   props: ['configDescription', 'value', 'placeholder'],
   methods: {
-    updateValue (event) {
-      if (event.lat && event.lng) {
-        this.$emit('input', [event.lat, event.lng].join(','))
-      } else {
-        this.$emit('input', event.target.value)
-      }
+    updateValue (position) {
+      this.$emit('input', position)
     },
     openMapPicker () {
       const popup = {
-        component: LocationPicker
+        component: LocationPickerPopup
       }
 
       this.$f7router.navigate({
diff --git a/bundles/org.openhab.ui/web/src/js/routes.js b/bundles/org.openhab.ui/web/src/js/routes.js
index a7e7c99100..e019336631 100644
--- a/bundles/org.openhab.ui/web/src/js/routes.js
+++ b/bundles/org.openhab.ui/web/src/js/routes.js
@@ -41,7 +41,7 @@ const PageEditors = {
 const RulesListPage = () => import(/* webpackChunkName: "admin-rules" */ '../pages/settings/rules/rules-list.vue')
 const RuleEditPage = () => import(/* webpackChunkName: "admin-rules" */ '../pages/settings/rules/rule-edit.vue')
 const ScriptEditPage = () => import(/* webpackChunkName: "admin-rules" */ '../pages/settings/rules/script/script-edit.vue')
-const SchedulePage = () => import(/* webpackChunkName: "admin-rules" */ '../pages/settings/schedule/schedule.vue')
+const SchedulePage = () => import(/* webpackChunkName: "admin-schedule" */ '../pages/settings/schedule/schedule.vue')
 
 const AnalyzerPage = () => import(/* webpackChunkName: "analyzer" */ '../pages/analyzer/analyzer.vue')
 
diff --git a/bundles/org.openhab.ui/web/src/pages/settings/rules/rule-edit.vue b/bundles/org.openhab.ui/web/src/pages/settings/rules/rule-edit.vue
index e9882e7253..cfbd6b6dd9 100644
--- a/bundles/org.openhab.ui/web/src/pages/settings/rules/rule-edit.vue
+++ b/bundles/org.openhab.ui/web/src/pages/settings/rules/rule-edit.vue
@@ -180,7 +180,6 @@ import SemanticsPicker from '@/components/tags/semantics-picker.vue'
 import TagInput from '@/components/tags/tag-input.vue'
 
 import RuleModulePopup from './rule-module-popup.vue'
-import CronEditor from '@/components/config/controls/cronexpression-editor.vue'
 
 import ModuleDescriptionSuggestions from './module-description-suggestions'
 import RuleStatus from '@/components/rule/rule-status-mixin'
@@ -587,27 +586,29 @@ export default {
       this.currentModule = mod
       this.currentModuleType = mod.type
       this.cronExpression = mod.configuration.cronExpression
-      const popup = {
-        component: CronEditor
-      }
-      this.$f7router.navigate({
-        url: 'cron-edit',
-        route: {
-          path: 'cron-edit',
-          popup
-        }
-      }, {
-        props: {
-          value: this.cronExpression
+      import(/* webpackChunkName: cronexpression-editor */ '@/components/config/controls/cronexpression-editor.vue').then((c) => {
+        const popup = {
+          component: c.default
         }
-      })
+        this.$f7router.navigate({
+          url: 'cron-edit',
+          route: {
+            path: 'cron-edit',
+            popup
+          }
+        }, {
+          props: {
+            value: this.cronExpression
+          }
+        })
 
-      this.$f7.once('cronEditorUpdate', this.updateCronExpression)
-      this.$f7.once('cronEditorClosed', () => {
-        this.$f7.off('cronEditorUpdate', this.updateCronExpression)
-        this.$nextTick(() => {
-          this.currentModule = null
-          this.currentModuleType = null
+        this.$f7.once('cronEditorUpdate', this.updateCronExpression)
+        this.$f7.once('cronEditorClosed', () => {
+          this.$f7.off('cronEditorUpdate', this.updateCronExpression)
+          this.$nextTick(() => {
+            this.currentModule = null
+            this.currentModuleType = null
+          })
         })
       })
     },

From 39890ef6bd7bf2264b78e4026cd1c555fdb449c9 Mon Sep 17 00:00:00 2001
From: Yannick Schaus <github@schaus.net>
Date: Wed, 10 Mar 2021 13:56:00 +0100
Subject: [PATCH 08/10] Fix webpack magic comment for cronexpression-editor

Signed-off-by: Yannick Schaus <github@schaus.net>
---
 .../components/config/controls/parameter-cronexpression.vue    | 3 +--
 .../org.openhab.ui/web/src/pages/settings/rules/rule-edit.vue  | 2 +-
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/bundles/org.openhab.ui/web/src/components/config/controls/parameter-cronexpression.vue b/bundles/org.openhab.ui/web/src/components/config/controls/parameter-cronexpression.vue
index 5b1b8e93ba..9b9aeca75a 100644
--- a/bundles/org.openhab.ui/web/src/components/config/controls/parameter-cronexpression.vue
+++ b/bundles/org.openhab.ui/web/src/components/config/controls/parameter-cronexpression.vue
@@ -19,7 +19,6 @@
         {{ translation }}
       </div>
     </f7-list-input>
-    <!-- <cron-editor :value="value" :opened="popupOpened" :popup-id="`config-${configDescription.name}-fullscreen`" @closed="popupOpened = false" @input="(value) => { $emit('input', value) }" /> -->
   </ul>
 </template>
 
@@ -37,7 +36,7 @@ export default {
       this.$emit('input', value)
     },
     openPopup () {
-      import(/* webpackChunkName: cronexpression-editor */ '@/components/config/controls/cronexpression-editor.vue').then((c) => {
+      import(/* webpackChunkName: "cronexpression-editor" */ '@/components/config/controls/cronexpression-editor.vue').then((c) => {
         const popup = {
           component: c.default
         }
diff --git a/bundles/org.openhab.ui/web/src/pages/settings/rules/rule-edit.vue b/bundles/org.openhab.ui/web/src/pages/settings/rules/rule-edit.vue
index cfbd6b6dd9..d79e72e6f2 100644
--- a/bundles/org.openhab.ui/web/src/pages/settings/rules/rule-edit.vue
+++ b/bundles/org.openhab.ui/web/src/pages/settings/rules/rule-edit.vue
@@ -586,7 +586,7 @@ export default {
       this.currentModule = mod
       this.currentModuleType = mod.type
       this.cronExpression = mod.configuration.cronExpression
-      import(/* webpackChunkName: cronexpression-editor */ '@/components/config/controls/cronexpression-editor.vue').then((c) => {
+      import(/* webpackChunkName: "cronexpression-editor" */ '@/components/config/controls/cronexpression-editor.vue').then((c) => {
         const popup = {
           component: c.default
         }

From b933954d4240954c457dd42085edffa75175f781 Mon Sep 17 00:00:00 2001
From: Yannick Schaus <github@schaus.net>
Date: Wed, 10 Mar 2021 14:14:20 +0100
Subject: [PATCH 09/10] Add magic comments to script editor imports to name
 chunk

Signed-off-by: Yannick Schaus <github@schaus.net>
---
 .../web/src/components/pagedesigner/sitemap/sitemap-code.vue    | 2 +-
 .../web/src/components/pagedesigner/widget-code-popup.vue       | 2 +-
 .../web/src/pages/developer/widgets/widget-edit.vue             | 2 +-
 .../src/pages/settings/items/metadata/item-metadata-edit.vue    | 2 +-
 .../settings/items/parser/items-add-from-textual-definition.vue | 2 +-
 .../web/src/pages/settings/pages/chart/chart-edit.vue           | 2 +-
 .../web/src/pages/settings/pages/home/home-edit.vue             | 2 +-
 .../web/src/pages/settings/pages/layout/layout-edit.vue         | 2 +-
 .../web/src/pages/settings/pages/map/map-edit.vue               | 2 +-
 .../web/src/pages/settings/pages/plan/plan-edit.vue             | 2 +-
 .../web/src/pages/settings/pages/tabs/tabs-edit.vue             | 2 +-
 .../org.openhab.ui/web/src/pages/settings/rules/rule-edit.vue   | 2 +-
 .../web/src/pages/settings/rules/script/script-edit.vue         | 2 +-
 .../web/src/pages/settings/things/thing-details.vue             | 2 +-
 14 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/bundles/org.openhab.ui/web/src/components/pagedesigner/sitemap/sitemap-code.vue b/bundles/org.openhab.ui/web/src/components/pagedesigner/sitemap/sitemap-code.vue
index 537eb1ae19..1ea2e4ee49 100644
--- a/bundles/org.openhab.ui/web/src/components/pagedesigner/sitemap/sitemap-code.vue
+++ b/bundles/org.openhab.ui/web/src/components/pagedesigner/sitemap/sitemap-code.vue
@@ -53,7 +53,7 @@ import dslUtil from './dslUtil'
 
 export default {
   components: {
-    'editor': () => import('@/components/config/controls/script-editor.vue')
+    'editor': () => import(/* webpackChunkName: "script-editor" */ '@/components/config/controls/script-editor.vue')
   },
   props: ['sitemap'],
   data () {
diff --git a/bundles/org.openhab.ui/web/src/components/pagedesigner/widget-code-popup.vue b/bundles/org.openhab.ui/web/src/components/pagedesigner/widget-code-popup.vue
index 022dfd0ff3..757b9e146b 100644
--- a/bundles/org.openhab.ui/web/src/components/pagedesigner/widget-code-popup.vue
+++ b/bundles/org.openhab.ui/web/src/components/pagedesigner/widget-code-popup.vue
@@ -38,7 +38,7 @@ import YAML from 'yaml'
 export default {
   props: ['component', 'componentType'],
   components: {
-    'editor': () => import('@/components/config/controls/script-editor.vue')
+    'editor': () => import(/* webpackChunkName: "script-editor" */ '@/components/config/controls/script-editor.vue')
   },
   data () {
     return {
diff --git a/bundles/org.openhab.ui/web/src/pages/developer/widgets/widget-edit.vue b/bundles/org.openhab.ui/web/src/pages/developer/widgets/widget-edit.vue
index 7178722fa1..dc7dd38d0d 100644
--- a/bundles/org.openhab.ui/web/src/pages/developer/widgets/widget-edit.vue
+++ b/bundles/org.openhab.ui/web/src/pages/developer/widgets/widget-edit.vue
@@ -110,7 +110,7 @@ strOptions.fold.lineWidth = 0
 export default {
   mixins: [DirtyMixin],
   components: {
-    'editor': () => import('@/components/config/controls/script-editor.vue'),
+    'editor': () => import(/* webpackChunkName: "script-editor" */ '@/components/config/controls/script-editor.vue'),
     ConfigSheet
   },
   props: ['uid', 'createMode'],
diff --git a/bundles/org.openhab.ui/web/src/pages/settings/items/metadata/item-metadata-edit.vue b/bundles/org.openhab.ui/web/src/pages/settings/items/metadata/item-metadata-edit.vue
index 9badd1e132..8804d6ec2f 100644
--- a/bundles/org.openhab.ui/web/src/pages/settings/items/metadata/item-metadata-edit.vue
+++ b/bundles/org.openhab.ui/web/src/pages/settings/items/metadata/item-metadata-edit.vue
@@ -75,7 +75,7 @@ export default {
   mixins: [DirtyMixin],
   props: ['itemName', 'namespace'],
   components: {
-    'editor': () => import('@/components/config/controls/script-editor.vue')
+    'editor': () => import(/* webpackChunkName: "script-editor" */ '@/components/config/controls/script-editor.vue')
   },
   data () {
     return {
diff --git a/bundles/org.openhab.ui/web/src/pages/settings/items/parser/items-add-from-textual-definition.vue b/bundles/org.openhab.ui/web/src/pages/settings/items/parser/items-add-from-textual-definition.vue
index c7434b6401..c8e4b37ec6 100644
--- a/bundles/org.openhab.ui/web/src/pages/settings/items/parser/items-add-from-textual-definition.vue
+++ b/bundles/org.openhab.ui/web/src/pages/settings/items/parser/items-add-from-textual-definition.vue
@@ -146,7 +146,7 @@ import grammar from '@/assets/items-lexer.nearley'
 
 export default {
   components: {
-    'editor': () => import('@/components/config/controls/script-editor.vue')
+    'editor': () => import(/* webpackChunkName: "script-editor" */ '@/components/config/controls/script-editor.vue')
   },
   props: ['textualDefinition'],
   data () {
diff --git a/bundles/org.openhab.ui/web/src/pages/settings/pages/chart/chart-edit.vue b/bundles/org.openhab.ui/web/src/pages/settings/pages/chart/chart-edit.vue
index 645548aa36..f68afddea0 100644
--- a/bundles/org.openhab.ui/web/src/pages/settings/pages/chart/chart-edit.vue
+++ b/bundles/org.openhab.ui/web/src/pages/settings/pages/chart/chart-edit.vue
@@ -91,7 +91,7 @@ import WidgetSlotConfigPopup from '@/components/pagedesigner/widget-slot-config-
 export default {
   mixins: [PageDesigner],
   components: {
-    'editor': () => import('@/components/config/controls/script-editor.vue'),
+    'editor': () => import(/* webpackChunkName: "script-editor" */ '@/components/config/controls/script-editor.vue'),
     OhChartPage,
     PageSettings,
     ChartDesigner,
diff --git a/bundles/org.openhab.ui/web/src/pages/settings/pages/home/home-edit.vue b/bundles/org.openhab.ui/web/src/pages/settings/pages/home/home-edit.vue
index 4d10277734..b7b18f4ca1 100644
--- a/bundles/org.openhab.ui/web/src/pages/settings/pages/home/home-edit.vue
+++ b/bundles/org.openhab.ui/web/src/pages/settings/pages/home/home-edit.vue
@@ -136,7 +136,7 @@ const ConfigurableWidgets = {
 export default {
   mixins: [PageDesigner, HomeCards],
   components: {
-    'editor': () => import('@/components/config/controls/script-editor.vue'),
+    'editor': () => import(/* webpackChunkName: "script-editor" */ '@/components/config/controls/script-editor.vue'),
     ConfigSheet,
     ModelTab
   },
diff --git a/bundles/org.openhab.ui/web/src/pages/settings/pages/layout/layout-edit.vue b/bundles/org.openhab.ui/web/src/pages/settings/pages/layout/layout-edit.vue
index 99eef8abb2..c52f42253c 100644
--- a/bundles/org.openhab.ui/web/src/pages/settings/pages/layout/layout-edit.vue
+++ b/bundles/org.openhab.ui/web/src/pages/settings/pages/layout/layout-edit.vue
@@ -135,7 +135,7 @@ import { compareItems } from '@/components/widgets/widget-order'
 export default {
   mixins: [PageDesigner],
   components: {
-    'editor': () => import('@/components/config/controls/script-editor.vue'),
+    'editor': () => import(/* webpackChunkName: "script-editor" */ '@/components/config/controls/script-editor.vue'),
     OhLayoutPage,
     PageSettings
   },
diff --git a/bundles/org.openhab.ui/web/src/pages/settings/pages/map/map-edit.vue b/bundles/org.openhab.ui/web/src/pages/settings/pages/map/map-edit.vue
index 881a742f93..096b148e0a 100644
--- a/bundles/org.openhab.ui/web/src/pages/settings/pages/map/map-edit.vue
+++ b/bundles/org.openhab.ui/web/src/pages/settings/pages/map/map-edit.vue
@@ -137,7 +137,7 @@ import ConfigSheet from '@/components/config/config-sheet.vue'
 export default {
   mixins: [PageDesigner],
   components: {
-    'editor': () => import('@/components/config/controls/script-editor.vue'),
+    'editor': () => import(/* webpackChunkName: "script-editor" */ '@/components/config/controls/script-editor.vue'),
     OhMapPage,
     PageSettings,
     ConfigSheet
diff --git a/bundles/org.openhab.ui/web/src/pages/settings/pages/plan/plan-edit.vue b/bundles/org.openhab.ui/web/src/pages/settings/pages/plan/plan-edit.vue
index 1332b3e922..10c8be0ce4 100644
--- a/bundles/org.openhab.ui/web/src/pages/settings/pages/plan/plan-edit.vue
+++ b/bundles/org.openhab.ui/web/src/pages/settings/pages/plan/plan-edit.vue
@@ -138,7 +138,7 @@ import ConfigSheet from '@/components/config/config-sheet.vue'
 export default {
   mixins: [PageDesigner],
   components: {
-    'editor': () => import('@/components/config/controls/script-editor.vue'),
+    'editor': () => import(/* webpackChunkName: "script-editor" */ '@/components/config/controls/script-editor.vue'),
     OhPlanPage,
     PageSettings,
     ConfigSheet
diff --git a/bundles/org.openhab.ui/web/src/pages/settings/pages/tabs/tabs-edit.vue b/bundles/org.openhab.ui/web/src/pages/settings/pages/tabs/tabs-edit.vue
index f35f25f822..4a16128da3 100644
--- a/bundles/org.openhab.ui/web/src/pages/settings/pages/tabs/tabs-edit.vue
+++ b/bundles/org.openhab.ui/web/src/pages/settings/pages/tabs/tabs-edit.vue
@@ -104,7 +104,7 @@ const ConfigurableWidgets = { OhTabDefinition }
 export default {
   mixins: [PageDesigner],
   components: {
-    'editor': () => import('@/components/config/controls/script-editor.vue'),
+    'editor': () => import(/* webpackChunkName: "script-editor" */ '@/components/config/controls/script-editor.vue'),
     PageSettings
   },
   props: ['createMode', 'uid'],
diff --git a/bundles/org.openhab.ui/web/src/pages/settings/rules/rule-edit.vue b/bundles/org.openhab.ui/web/src/pages/settings/rules/rule-edit.vue
index d79e72e6f2..9dc6424cfe 100644
--- a/bundles/org.openhab.ui/web/src/pages/settings/rules/rule-edit.vue
+++ b/bundles/org.openhab.ui/web/src/pages/settings/rules/rule-edit.vue
@@ -190,7 +190,7 @@ export default {
   components: {
     SemanticsPicker,
     TagInput,
-    'editor': () => import('@/components/config/controls/script-editor.vue')
+    'editor': () => import(/* webpackChunkName: "script-editor" */ '@/components/config/controls/script-editor.vue')
   },
   props: ['ruleId', 'createMode', 'schedule'],
   data () {
diff --git a/bundles/org.openhab.ui/web/src/pages/settings/rules/script/script-edit.vue b/bundles/org.openhab.ui/web/src/pages/settings/rules/script/script-edit.vue
index 3a6794496e..855f70174f 100644
--- a/bundles/org.openhab.ui/web/src/pages/settings/rules/script/script-edit.vue
+++ b/bundles/org.openhab.ui/web/src/pages/settings/rules/script/script-edit.vue
@@ -119,7 +119,7 @@ export default {
   mixins: [RuleStatus, ModuleDescriptionSuggestions, DirtyMixin],
   components: {
     ScriptGeneralSettings,
-    'editor': () => import('@/components/config/controls/script-editor.vue'),
+    'editor': () => import(/* webpackChunkName: "script-editor" */ '@/components/config/controls/script-editor.vue'),
     'blockly-editor': () => import(/* webpackChunkName: "blockly-editor" */ './blockly-editor.vue')
   },
   props: ['ruleId', 'moduleId', 'createMode'],
diff --git a/bundles/org.openhab.ui/web/src/pages/settings/things/thing-details.vue b/bundles/org.openhab.ui/web/src/pages/settings/things/thing-details.vue
index 60ad5a364a..6a6133e3ad 100644
--- a/bundles/org.openhab.ui/web/src/pages/settings/things/thing-details.vue
+++ b/bundles/org.openhab.ui/web/src/pages/settings/things/thing-details.vue
@@ -260,7 +260,7 @@ export default {
     ChannelList,
     ThingGeneralSettings,
     ZWaveNetworkPopup,
-    'editor': () => import('@/components/config/controls/script-editor.vue')
+    'editor': () => import(/* webpackChunkName: "script-editor" */ '@/components/config/controls/script-editor.vue')
   },
   props: ['thingId'],
   data () {

From e9e905e585dbf2f71ad763ce32e2aec22bfdbab8 Mon Sep 17 00:00:00 2001
From: Yannick Schaus <github@schaus.net>
Date: Wed, 10 Mar 2021 14:49:52 +0100
Subject: [PATCH 10/10] Split empty state placeholder component

Stop considering it a global control and put it in a separate chunk
(with the translations).

Signed-off-by: Yannick Schaus <github@schaus.net>
---
 .../web/src/components/widgets/modals/oh-popup.vue           | 5 ++++-
 .../web/src/components/widgets/modals/oh-sheet.vue           | 5 ++++-
 bundles/org.openhab.ui/web/src/js/app.js                     | 2 --
 bundles/org.openhab.ui/web/src/pages/home/overview-tab.vue   | 1 +
 bundles/org.openhab.ui/web/src/pages/page/page-view.vue      | 1 +
 .../web/src/pages/settings/addons/addons-list.vue            | 1 +
 .../web/src/pages/settings/items/items-list-vlist.vue        | 3 +++
 .../items/parser/items-add-from-textual-definition.vue       | 1 +
 .../org.openhab.ui/web/src/pages/settings/model/model.vue    | 1 +
 .../web/src/pages/settings/pages/pages-list.vue              | 3 +++
 .../web/src/pages/settings/rules/rules-list.vue              | 3 +++
 .../web/src/pages/settings/schedule/schedule.vue             | 3 +++
 .../web/src/pages/settings/things/add/choose-binding.vue     | 3 +++
 .../web/src/pages/settings/things/inbox/inbox-list.vue       | 3 +++
 .../web/src/pages/settings/things/things-list.vue            | 3 +++
 15 files changed, 34 insertions(+), 4 deletions(-)

diff --git a/bundles/org.openhab.ui/web/src/components/widgets/modals/oh-popup.vue b/bundles/org.openhab.ui/web/src/components/widgets/modals/oh-popup.vue
index fb43fc51bd..723d3c66e1 100644
--- a/bundles/org.openhab.ui/web/src/components/widgets/modals/oh-popup.vue
+++ b/bundles/org.openhab.ui/web/src/components/widgets/modals/oh-popup.vue
@@ -27,6 +27,9 @@
 import modal from './modal-mixin'
 
 export default {
-  mixins: [modal]
+  mixins: [modal],
+  components: {
+    'empty-state-placeholder': () => import('@/components/empty-state-placeholder.vue')
+  }
 }
 </script>
diff --git a/bundles/org.openhab.ui/web/src/components/widgets/modals/oh-sheet.vue b/bundles/org.openhab.ui/web/src/components/widgets/modals/oh-sheet.vue
index 46f5c60c3c..55dcc03423 100644
--- a/bundles/org.openhab.ui/web/src/components/widgets/modals/oh-sheet.vue
+++ b/bundles/org.openhab.ui/web/src/components/widgets/modals/oh-sheet.vue
@@ -25,6 +25,9 @@
 import modal from './modal-mixin'
 
 export default {
-  mixins: [modal]
+  mixins: [modal],
+  components: {
+    'empty-state-placeholder': () => import('@/components/empty-state-placeholder.vue')
+  }
 }
 </script>
diff --git a/bundles/org.openhab.ui/web/src/js/app.js b/bundles/org.openhab.ui/web/src/js/app.js
index 6abc679a90..8d2306d17b 100644
--- a/bundles/org.openhab.ui/web/src/js/app.js
+++ b/bundles/org.openhab.ui/web/src/js/app.js
@@ -8,7 +8,6 @@ import SitemapWidgetGeneric from '../components/sitemap/widget-generic.vue'
 import OHIconComponent from '../components/widgets/system/oh-icon.vue'
 import ModelTreeviewItem from '../components/model/treeview-item.vue'
 import SitemapTreeviewItem from '../components/pagedesigner/sitemap/treeview-item.vue'
-import EmptyStatePlaceholder from '../components/empty-state-placeholder.vue'
 import GenericWidgetComponent from '../components/widgets/generic-widget-component.vue'
 
 // Import Framework7
@@ -80,5 +79,4 @@ Vue.component('sitemap-widget-generic', SitemapWidgetGeneric)
 Vue.component('oh-icon', OHIconComponent)
 Vue.component('model-treeview-item', ModelTreeviewItem)
 Vue.component('sitemap-treeview-item', SitemapTreeviewItem)
-Vue.component('empty-state-placeholder', EmptyStatePlaceholder)
 Vue.component('generic-widget-component', GenericWidgetComponent)
diff --git a/bundles/org.openhab.ui/web/src/pages/home/overview-tab.vue b/bundles/org.openhab.ui/web/src/pages/home/overview-tab.vue
index 4c7cb9a208..aee8af21c6 100644
--- a/bundles/org.openhab.ui/web/src/pages/home/overview-tab.vue
+++ b/bundles/org.openhab.ui/web/src/pages/home/overview-tab.vue
@@ -52,6 +52,7 @@ export default {
   props: ['context', 'allowChat'],
   components: {
     OhLayoutPage,
+    'empty-state-placeholder': () => import('@/components/empty-state-placeholder.vue'),
     'habot': () => import(/* webpackChunkName: "habot" */ '../../components/home/habot.vue')
   },
   data () {
diff --git a/bundles/org.openhab.ui/web/src/pages/page/page-view.vue b/bundles/org.openhab.ui/web/src/pages/page/page-view.vue
index 5fdd0d2bfa..05162de26d 100644
--- a/bundles/org.openhab.ui/web/src/pages/page/page-view.vue
+++ b/bundles/org.openhab.ui/web/src/pages/page/page-view.vue
@@ -51,6 +51,7 @@ import OhLayoutPage from '@/components/widgets/layout/oh-layout-page.vue'
 export default {
   components: {
     'oh-layout-page': OhLayoutPage,
+    'empty-state-placeholder': () => import('@/components/empty-state-placeholder.vue'),
     'oh-map-page': () => import(/* webpackChunkName: "map-page" */ '@/components/widgets/map/oh-map-page.vue'),
     'oh-plan-page': () => import(/* webpackChunkName: "plan-page" */ '@/components/widgets/plan/oh-plan-page.vue'),
     'oh-chart-page': () => import(/* webpackChunkName: "chart-page" */ '@/components/widgets/chart/oh-chart-page.vue')
diff --git a/bundles/org.openhab.ui/web/src/pages/settings/addons/addons-list.vue b/bundles/org.openhab.ui/web/src/pages/settings/addons/addons-list.vue
index 379b84f851..b4a420dc78 100644
--- a/bundles/org.openhab.ui/web/src/pages/settings/addons/addons-list.vue
+++ b/bundles/org.openhab.ui/web/src/pages/settings/addons/addons-list.vue
@@ -71,6 +71,7 @@ import AddonDetailsSheet from './addon-details-sheet.vue'
 
 export default {
   components: {
+    'empty-state-placeholder': () => import('@/components/empty-state-placeholder.vue'),
     AddonDetailsSheet
   },
   props: ['addonType'],
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 e5fbfcf8fc..0176d70473 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
@@ -116,6 +116,9 @@
 
 <script>
 export default {
+  components: {
+    'empty-state-placeholder': () => import('@/components/empty-state-placeholder.vue')
+  },
   data () {
     let vlHeight
     if (this.$theme.ios) vlHeight = 78
diff --git a/bundles/org.openhab.ui/web/src/pages/settings/items/parser/items-add-from-textual-definition.vue b/bundles/org.openhab.ui/web/src/pages/settings/items/parser/items-add-from-textual-definition.vue
index c8e4b37ec6..22fd68bf2f 100644
--- a/bundles/org.openhab.ui/web/src/pages/settings/items/parser/items-add-from-textual-definition.vue
+++ b/bundles/org.openhab.ui/web/src/pages/settings/items/parser/items-add-from-textual-definition.vue
@@ -146,6 +146,7 @@ import grammar from '@/assets/items-lexer.nearley'
 
 export default {
   components: {
+    'empty-state-placeholder': () => import('@/components/empty-state-placeholder.vue'),
     'editor': () => import(/* webpackChunkName: "script-editor" */ '@/components/config/controls/script-editor.vue')
   },
   props: ['textualDefinition'],
diff --git a/bundles/org.openhab.ui/web/src/pages/settings/model/model.vue b/bundles/org.openhab.ui/web/src/pages/settings/model/model.vue
index 868ec73f43..825233e465 100644
--- a/bundles/org.openhab.ui/web/src/pages/settings/model/model.vue
+++ b/bundles/org.openhab.ui/web/src/pages/settings/model/model.vue
@@ -202,6 +202,7 @@ function compareModelItems (o1, o2) {
 
 export default {
   components: {
+    'empty-state-placeholder': () => import('@/components/empty-state-placeholder.vue'),
     ModelDetailsPane,
     ItemStatePreview,
     ItemDetails,
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 726b57aa88..010f9d5964 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
@@ -142,6 +142,9 @@
 
 <script>
 export default {
+  components: {
+    'empty-state-placeholder': () => import('@/components/empty-state-placeholder.vue')
+  },
   data () {
     return {
       ready: false,
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 a64aa27709..29ad2462d8 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
@@ -128,6 +128,9 @@ import RuleStatus from '@/components/rule/rule-status-mixin'
 export default {
   mixins: [RuleStatus],
   props: ['showScripts'],
+  components: {
+    'empty-state-placeholder': () => import('@/components/empty-state-placeholder.vue')
+  },
   data () {
     return {
       ready: false,
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 9ea22a7bed..cf91805793 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
@@ -82,6 +82,9 @@
 import later from 'later-again'
 
 export default {
+  components: {
+    'empty-state-placeholder': () => import('@/components/empty-state-placeholder.vue')
+  },
   data () {
     return {
       ready: false,
diff --git a/bundles/org.openhab.ui/web/src/pages/settings/things/add/choose-binding.vue b/bundles/org.openhab.ui/web/src/pages/settings/things/add/choose-binding.vue
index 78eb977952..89dba10c82 100644
--- a/bundles/org.openhab.ui/web/src/pages/settings/things/add/choose-binding.vue
+++ b/bundles/org.openhab.ui/web/src/pages/settings/things/add/choose-binding.vue
@@ -63,6 +63,9 @@
 
 <script>
 export default {
+  components: {
+    'empty-state-placeholder': () => import('@/components/empty-state-placeholder.vue')
+  },
   data () {
     return {
       ready: false,
diff --git a/bundles/org.openhab.ui/web/src/pages/settings/things/inbox/inbox-list.vue b/bundles/org.openhab.ui/web/src/pages/settings/things/inbox/inbox-list.vue
index eb7eb2da59..52d322f732 100644
--- a/bundles/org.openhab.ui/web/src/pages/settings/things/inbox/inbox-list.vue
+++ b/bundles/org.openhab.ui/web/src/pages/settings/things/inbox/inbox-list.vue
@@ -117,6 +117,9 @@
 
 <script>
 export default {
+  components: {
+    'empty-state-placeholder': () => import('@/components/empty-state-placeholder.vue')
+  },
   data () {
     return {
       ready: false,
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 bdb7612470..c4db3b0830 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
@@ -124,6 +124,9 @@ import thingStatus from '@/components/thing/thing-status-mixin'
 
 export default {
   mixins: [thingStatus],
+  components: {
+    'empty-state-placeholder': () => import('@/components/empty-state-placeholder.vue')
+  },
   data () {
     return {
       ready: false,