perf: lazy load model-viewer lib

adonisjs-community · Jan 28, 2024 · 56cae0e · 56cae0e
1 parent c7621d2
commit 56cae0e
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 0 deletions.
diff --git a/resources/app.ts b/resources/app.ts
@@ -22,3 +22,17 @@ createInertiaApp({
       .mount(el)
   },
 })
+
+window.requestIdleCallback(() => {
+  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.onload = () => {
+    const modelViewerEls = document.querySelectorAll('model-viewer[data-not-loaded]')
+
+    for (const modelViewerEl of modelViewerEls) {
+      modelViewerEl.removeAttribute('data-not-loaded')
+    }
+  }
+  document.body.appendChild(scriptEl)
+})
diff --git a/resources/components/hero.vue b/resources/components/hero.vue
@@ -36,6 +36,7 @@ import Button from '@/components/ui/button.vue'
         </div>
 
         <model-viewer
+          data-not-loaded
           alt="AdonisJS 3d logo"
           class="hidden h-110 flex-1"
           md="block"

diff --git a/resources/css/app.css b/resources/css/app.css
@@ -24,5 +24,12 @@ body .v-popper--theme-tooltip .v-popper__inner {
 
 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;
 }