#167 new build waiting on load to avoid blocking the main thread

ephes · Nov 1, 2024 · d01f8c2 · d01f8c2
1 parent 760d780
commit d01f8c2
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 3 deletions.
diff --git a/cast/static/cast/vite/manifest.json b/cast/static/cast/vite/manifest.json
@@ -1,6 +1,6 @@
 {
   "src/audio/podlove-player.ts": {
-    "file": "podlovePlayer-vU4Jjjws.js",
+    "file": "podlovePlayer-Cn4SwLmX.js",
     "name": "podlovePlayer",
     "src": "src/audio/podlove-player.ts",
     "isEntry": true

diff --git a/...tatic/cast/vite/podlovePlayer-vU4Jjjws.js → ...tatic/cast/vite/podlovePlayer-Cn4SwLmX.js b/...tatic/cast/vite/podlovePlayer-vU4Jjjws.js → ...tatic/cast/vite/podlovePlayer-Cn4SwLmX.js
@@ -1,4 +1,4 @@
-class d extends HTMLElement{constructor(){super(),this.observer=null,this.shadow=this.attachShadow({mode:"open"})}connectedCallback(){this.renderPlaceholder(),this.observeElement()}disconnectedCallback(){this.observer&&this.observer.disconnect()}renderPlaceholder(){const e=document.createElement("div");e.classList.add("podlove-player-container");const t=document.createElement("style");t.textContent=`
+class d extends HTMLElement{constructor(){super(),this.observer=null,this.shadow=this.attachShadow({mode:"open"})}connectedCallback(){this.renderPlaceholder(),document.readyState==="complete"?this.observeElement():window.addEventListener("load",()=>{this.observeElement()},{once:!0})}disconnectedCallback(){this.observer&&this.observer.disconnect()}renderPlaceholder(){const e=document.createElement("div");e.classList.add("podlove-player-container");const t=document.createElement("style");t.textContent=`
       .podlove-player-container {
         width: 100%;
         max-width: 936px;

diff --git a/javascript/src/audio/podlove-player.ts b/javascript/src/audio/podlove-player.ts
@@ -8,7 +8,16 @@ class PodlovePlayerElement extends HTMLElement {
 
   connectedCallback() {
     this.renderPlaceholder();
-    this.observeElement();
+
+    if (document.readyState === 'complete') {
+      // The page is already fully loaded
+      this.observeElement();
+    } else {
+      // Wait for the 'load' event before initializing
+      window.addEventListener('load', () => {
+        this.observeElement();
+      }, { once: true });
+    }
   }
 
   disconnectedCallback() {