From 878b724394088ee876dbd03ac059cbd507d38b01 Mon Sep 17 00:00:00 2001
From: Romain Lanz <romain.lanz@pm.me>
Date: Sun, 28 Jan 2024 22:21:08 +0100
Subject: [PATCH] fix(model-viewer): handle resize

---
 resources/app.ts | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/resources/app.ts b/resources/app.ts
index 2f51790..27ad73f 100644
--- a/resources/app.ts
+++ b/resources/app.ts
@@ -23,14 +23,17 @@ createInertiaApp({
   },
 })
 
-window.requestIdleCallback(() => {
-  if (!window.matchMedia('(min-width: 768px)').matches) {
+let modelViewerScriptLoaded = false
+
+function loadModelViewerScript() {
+  if (!window.matchMedia('(min-width: 768px)').matches || modelViewerScriptLoaded) {
     return
   }
 
   const scriptEl = document.createElement('script')
   scriptEl.src = 'https://ajax.googleapis.com/ajax/libs/model-viewer/3.3.0/model-viewer.min.js'
   scriptEl.async = true
+  scriptEl.type = 'module'
   scriptEl.onload = () => {
     const modelViewerEls = document.querySelectorAll('model-viewer[data-not-loaded]')
 
@@ -38,5 +41,15 @@ window.requestIdleCallback(() => {
       modelViewerEl.removeAttribute('data-not-loaded')
     }
   }
+
   document.body.appendChild(scriptEl)
+  modelViewerScriptLoaded = true
+}
+
+window.requestIdleCallback(() => {
+  loadModelViewerScript()
+})
+
+window.addEventListener('resize', () => {
+  loadModelViewerScript()
 })