From 118f100a60891854a38c3f47a18c18ff18d35b3b Mon Sep 17 00:00:00 2001
From: Romain Lanz <romain.lanz@pm.me>
Date: Sun, 28 Jan 2024 22:18:40 +0100
Subject: [PATCH] perf: load model-viewer library only when correct size

---
 resources/app.ts              | 4 ++++
 resources/css/app.css         | 4 ----
 resources/views/app_root.edge | 1 -
 3 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/resources/app.ts b/resources/app.ts
index 3d9cd41..2f51790 100644
--- a/resources/app.ts
+++ b/resources/app.ts
@@ -24,6 +24,10 @@ createInertiaApp({
 })
 
 window.requestIdleCallback(() => {
+  if (!window.matchMedia('(min-width: 768px)').matches) {
+    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
diff --git a/resources/css/app.css b/resources/css/app.css
index db4f2a9..449e00d 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -26,10 +26,6 @@ body .v-popper--theme-tooltip .v-popper__arrow-outer {
   @apply border-base4 backdrop-blur;
 }
 
-model-viewer {
-  height: 440px;
-}
-
 model-viewer[data-not-loaded] {
   @apply hidden;
 }
diff --git a/resources/views/app_root.edge b/resources/views/app_root.edge
index 3676394..b28988c 100644
--- a/resources/views/app_root.edge
+++ b/resources/views/app_root.edge
@@ -25,7 +25,6 @@
   <meta name="msapplication-TileColor" content="#da532c">
   <meta name="theme-color" content="#ffffff">
 
-  <script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.3.0/model-viewer.min.js" defer></script>
   @vite(['resources/app.ts'])
 </head>