Template loading without [[]] leakage

blocks/page-server/page-server.js

@@ -1,11 +1,9 @@
-import { getMetadata } from '../../utils/utils.js';
+import { getMetadata, REG } from '../../utils/utils.js';
 
 const preserveFormatKeys = [
   'event-description',
 ];
 
-const REG = /\[\[(.*?)\]\]/g;
-
 function handleRegisterButton(a) {
   const signIn = () => {
     if (typeof window.adobeIMS?.signIn !== 'function') {
@@ -63,11 +61,18 @@ function updateImgTag(child, matchCallback, parentElement) {
     });
 
     parentPic.querySelectorAll('img').forEach((el) => {
+      const onImgLoad = () => {
+        el.classList.add('loaded');
+        el.removeEventListener('load', onImgLoad);
+      };
+
       try {
         el.src = el.src.replace(/.*\?/, `${replacedSrc}?`);
       } catch (e) {
         window.lana?.log(`failed to convert optimized img from ${el} with dynamic data: ${e}`);
       }
+
+      el.addEventListener('load', onImgLoad);
     });
   } else if (originalAlt.match(REG)) {
     parentElement.remove();
@@ -117,4 +122,5 @@ export function autoUpdateContent(parent) {
 
 export default async function init(el) {
   autoUpdateContent(el.closest('main'));
+  document.body.classList.remove('loading');
 }

scripts/scripts.js

@@ -11,7 +11,7 @@
  */
 
 import { setLibs, decorateArea } from './utils.js';
-import { getMetadata } from '../utils/utils.js';
+import { decorateTemplate } from '../utils/utils.js';
 
 // Add project-wide style path here.
 const STYLES = '';
@@ -60,15 +60,7 @@ window.bm8tr = await import('../deps/block-mediator.min.js').then((mod) => mod.d
   });
 }());
 
-if (getMetadata('event-template')) {
-  document.body.querySelectorAll('a[href*="#event-template"]').forEach((a) => {
-    try {
-      a.href = getMetadata('event-template');
-    } catch (e) {
-      window.lana?.log(`Error while attempting to replace link ${a.href}: ${e}`);
-    }
-  });
-}
+decorateTemplate();
 
 (async function loadPage() {
   const { loadArea, setConfig, loadDelayed } = await import(`${miloLibs}/utils/utils.js`);

styles/styles.css

@@ -7,8 +7,26 @@
  *
  */
 
- main a.con-button.no-event {
+body.has-page-server {
+  transition: opacity 0.2s;
+}
+
+body.has-page-server.loading {
+  pointer-events: none;
+  opacity: 0!important;
+}
+
+body.has-page-server picture > img[alt^="[["] {
+  transition: opacity 0.2s;
+  opacity: 0;
+}
+
+body.has-page-server picture > img.loaded {
+  opacity: 1;
+}
+
+main a.con-button.no-event {
   user-select: none;
   pointer-events: none;
   opacity: 0.5;
- }
+}

utils/utils.js

@@ -1,3 +1,5 @@
+export const REG = /\[\[(.*?)\]\]/g;
+
 export function getMetadata(name) {
   const attr = name && name.includes(':') ? 'property' : 'name';
   const meta = document.head.querySelector(`meta[${attr}="${name}"]`);
@@ -9,3 +11,21 @@ export function yieldToMain() {
     setTimeout(r, 0);
   });
 }
+
+export function decorateTemplate() {
+  const pageServer = document.body.querySelector('div.page-server');
+
+  if (pageServer) {
+    document.body.classList.add('loading', 'has-page-server');
+  }
+
+  if (getMetadata('event-template')) {
+    document.body.querySelectorAll('a[href*="#event-template"]').forEach((a) => {
+      try {
+        a.href = getMetadata('event-template');
+      } catch (e) {
+        window.lana?.log(`Error while attempting to replace link ${a.href}: ${e}`);
+      }
+    });
+  }
+}