IMPR: lower CLS

app/client/src/js/_graphql.js

@@ -4,26 +4,31 @@ import Events from '@a2nt/ss-bootstrap-ui-webpack-boilerplate-react/src/js/_even
 const m = require("mithril") // eslint-disable-line
 
 window.addEventListener('prefetch-loaded', () => {
-  const MainContentContainer = document.getElementById('MainContent')
-
-  const MainContent = document.createElement('div')
-  if (!MainContentContainer.dataset['legacy']) {
-    MainContent.classList.add('page--container')
-    MainContentContainer.append(MainContent)
-
-    const page = require('@a2nt/mithril-ui/src/js/ui/page/tpl')
-    m.mount(MainContent, page)
-  } else {
-    // legacy fallback
-    const spinner = document.getElementById('PageLoading')
-    if (spinner) {
-      window.addEventListener(`${Events.LOADED}`, () => {
-        spinner.classList.add('d-none')
-      })
-
-      window.addEventListener(`${Events.AJAX}`, () => {
-        spinner.classList.add('d-none')
-      })
+    if (window.initAjaxOnce) {
+        return
     }
-  }
+
+    const MainContentContainer = document.getElementById('MainContent')
+
+    const MainContent = document.createElement('div')
+    if (!MainContentContainer.dataset['legacy']) {
+        MainContent.classList.add('page--container')
+        MainContentContainer.append(MainContent)
+
+        const page = require('@a2nt/mithril-ui/src/js/ui/page/tpl')
+        m.mount(MainContent, page)
+    } else {
+        // legacy fallback
+        const spinner = document.getElementById('PageLoading')
+        if (spinner) {
+            window.addEventListener(`${Events.LOADED}`, () => {
+                spinner.classList.add('d-none')
+            })
+
+            window.addEventListener(`${Events.AJAX}`, () => {
+                spinner.classList.add('d-none')
+            })
+        }
+    }
+    window.initAjaxOnce = true
 })

app/templates/Includes/LoadingSpinner.ss

@@ -1,15 +1,23 @@
 <style>
 	<%-- Some prestyling to prevent jumpings --%>
+	.row{display:flex;flex-wrap:wrap}
+    @media (min-width: 576px){.col-sm {flex:1 0 0%}}
 	button{background:none;border:0}
     .container{margin-left:auto;margin-right:auto;padding-left:0.75rem;padding-right:0.75rem}
-    @media (min-width: 1368px){.container{max-width:1180px}}
+    @media (min-width: 1368px){.container{max-width:1200px}}
     .meta-MetaWindow {position:fixed}
     .collapse:not(.show),.offline-message:not(.show){display:none}
     .row {display:flex;justify-content:space-between}
     .breadcrumb{list-style:none}
     .breadcrumb-item{display:inline-block}
+    .d-none{display:none!important}
     <%-- always show scroll bar --%>
     html {overflow-y:scroll}
+    .meta-MetaWindow-overlay{display:none}
+    .a2nt__elementalbasics__elements__sliderelement>.container{max-width:none;padding:0}
+    .glide__slides{display:flex;list-style:none;padding:0}
+    [data-per-view="1"] .glide__img{min-width:100vw}
+    .page-header-element{display:none}
     <%-- Site Specific --%>
 	@keyframes lds-ellipsis1 {
 		0% {

babel.config.json

@@ -4,8 +4,10 @@
             "@babel/preset-env",
             {
                 "targets": {
-                    "node": "6.10",
-                    "browsers": "> 0.25%, not dead"
+                    "browsers": [
+                        "last 2 version",
+                        "ie > 11"
+                    ]
                 }
             }
         ],

package.json

@@ -35,7 +35,7 @@
   ],
   "dependencies": {
     "@a2nt/meta-lightbox-js": "^4.2.8",
-    "@a2nt/mithril-ui": "^1.2.2",
+    "@a2nt/mithril-ui": "^1.2.4",
     "@a2nt/ss-bootstrap-ui-webpack-boilerplate-react": "^5.3.9",
     "@angular/common": "^18.0.4",
     "@angular/core": "^18.0.4",