IMPR: Allow to preload content

app/client/src/js/_graphql.js

@@ -1,28 +1,29 @@
-/* eslint-disable global-require */
+import '@a2nt/mithril-ui/src/js/ui'
-
+import Events from '@a2nt/ss-bootstrap-ui-webpack-boilerplate-react/src/js/_events'
-import '@a2nt/mithril-ui/src/js/ui';
-import Events from '@a2nt/ss-bootstrap-ui-webpack-boilerplate-react/src/js/_events';
 
 const m = require("mithril") // eslint-disable-line
-const MainContentContainer = document.getElementById('MainContent');
 
-const MainContent = document.createElement('div');
+window.addEventListener('prefetch-loaded', () => {
-if (!MainContentContainer.dataset.legacy) {
+  const MainContentContainer = document.getElementById('MainContent')
-  MainContent.classList.add('page--container');
-  MainContentContainer.append(MainContent);
 
-  const page = require('@a2nt/mithril-ui/src/js/ui/page/tpl');
+  const MainContent = document.createElement('div')
-  m.mount(MainContent, page);
+  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');
+    const spinner = document.getElementById('PageLoading')
     if (spinner) {
       window.addEventListener(`${Events.LOADED}`, () => {
-      spinner.classList.add('d-none');
+        spinner.classList.add('d-none')
-    });
+      })
 
       window.addEventListener(`${Events.AJAX}`, () => {
-      spinner.classList.add('d-none');
+        spinner.classList.add('d-none')
-    });
+      })
     }
   }
+})

app/src/Pages/PageController.php

@@ -11,6 +11,7 @@ use SilverStripe\CMS\Model\SiteTree;
 use SilverStripe\Control\Controller;
 use SilverStripe\Control\Director;
 use SilverStripe\View\SSViewer;
+use A2nt\CMSNiceties\Templates\DeferredRequirements;
 
 /**
  * Class \PageController
@@ -28,12 +29,25 @@ class PageController extends ContentController
 
     protected function init()
     {
+        DeferredRequirements::addPreloadFont([
+            'https://fonts.gstatic.com/s/lato/v24/S6u9w4BMUTPHh6UVSwiPGQ3q5d0.woff2',
+            'https://fonts.gstatic.com/s/lato/v24/S6uyw4BMUTPHjx4wXiWtFCc.woff2',
+            'https://fonts.gstatic.com/s/lato/v24/S6u8w4BMUTPHjxsAXC-qNiXg7Q.woff2',
+            'https://use.fontawesome.com/releases/v6.5.2/webfonts/fa-solid-900.woff2',
+            'https://use.fontawesome.com/releases/v6.5.2/webfonts/fa-regular-400.woff2',
+            'https://use.fontawesome.com/releases/v6.5.2/webfonts/fa-brands-400.woff2',
+        ]);
+
+        DeferredRequirements::addPreloadCSS(
+            'https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400;1,700&family=Montserrat:ital,wght@0,400;0,700;1,400;1,700&display=swap'
+        );
+
         HTTPCacheControlMiddleware::singleton()
             ->enableCache(true)
             // 1 minute
             ->setMaxAge(60);
 
-        return parent::init();
+        parent::init();
     }
 
     public function ElementalArea()

package.json

@@ -35,11 +35,11 @@
   ],
   "dependencies": {
     "@a2nt/meta-lightbox-js": "^4.2.8",
-    "@a2nt/mithril-ui": "^1.1.9",
+    "@a2nt/mithril-ui": "^1.2.2",
     "@a2nt/ss-bootstrap-ui-webpack-boilerplate-react": "^5.3.9",
-    "@angular/common": "^18.0.3",
+    "@angular/common": "^18.0.4",
-    "@angular/core": "^18.0.3",
+    "@angular/core": "^18.0.4",
-    "@apollo/client": "^3.10.5",
+    "@apollo/client": "^3.10.6",
     "@glidejs/glide": "^3.6.1",
     "@popperjs/core": "^2.11.8",
     "@turf/clone": "^6.5.0",
@@ -60,7 +60,7 @@
     "eslint-scope": "^8.0.1",
     "fast-deep-equal": "^3.1.3",
     "font-awesome": "^4.7.0",
-    "graphql": "^16.8.2",
+    "graphql": "^16.9.0",
     "hammerjs": "^2.0.8",
     "inputmask": "^5.0.9",
     "kdbush": "^4.0.2",