perf: load model-viewer library only when correct size

adonisjs-community · Jan 28, 2024 · 118f100 · 118f100
1 parent e288ea0
commit 118f100
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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>