perf: move map to component and lazy load with intersection observer

components/home/HomeMap.vue

+<template>
+  <section id="map">
+    <div class="container flex items-end mb-3">
+      <FaviconMap class="w-12 h-12 mr-3 fill-current dark:text-gray-100" />
+      <a
+        href="https://carte.monnaie-libre.fr"
+        target="_blank"
+        class="
+          group
+          bg-clip-text bg-gradient-to-r
+          font-extrabold
+          from-purple-800
+          hover:underline
+          text-4xl text-transparent
+          to-blue-600
+          uppercase
+        "
+        rel="noopener noreferrer"
+      >
+        Carte
+        <fa
+          icon="external-link-alt"
+          class="w-3 ml-1.5 text-gray-500 opacity-0 group-hover:opacity-75"
+        />
+      </a>
+    </div>
+
+    <iframe
+      :src="intersected ? 'https://carte.monnaie-libre.fr/?zoom=5' : null"
+      class="w-screen bg-gray-200"
+      style="height: 50vh; min-height: 600px"
+      title="Carte monnaie-libre"
+    />
+  </section>
+</template>
+
+<script>
+import FaviconMap from '~/static/img/favicon-map-g1.svg?inline'
+
+export default {
+  components: {
+    FaviconMap,
+  },
+  data() {
+    return {
+      observer: null,
+      intersected: false,
+    }
+  },
+  mounted() {
+    this.observer = new IntersectionObserver(
+      (entries) => {
+        const item = entries[0]
+        if (item.isIntersecting) {
+          this.intersected = true
+          this.observer.disconnect()
+        }
+      },
+      {
+        rootMargin: '500px',
+      }
+    )
+
+    this.observer.observe(this.$el)
+  },
+  destroyed() {
+    this.observer.disconnect()
+  },
+}
+</script>

pages/index.vue

@@ -37,49 +37,13 @@
 
     <HomeNextEvents />
 
-    <section id="map">
-      <div class="container flex items-end mb-3">
-        <FaviconMap class="w-12 h-12 mr-3 fill-current dark:text-gray-100" />
-        <a
-          href="https://carte.monnaie-libre.fr"
-          target="_blank"
-          class="
-            group
-            bg-clip-text bg-gradient-to-r
-            font-extrabold
-            from-purple-800
-            hover:underline
-            text-4xl text-transparent
-            to-blue-600
-            uppercase
-          "
-          rel="noopener noreferrer"
-        >
-          Carte
-          <fa
-            icon="external-link-alt"
-            class="w-3 ml-1.5 text-gray-500 opacity-0 group-hover:opacity-75"
-          />
-        </a>
-      </div>
-      <iframe
-        src="https://carte.monnaie-libre.fr/?zoom=5"
-        class="w-screen"
-        style="height: 50vh; min-height: 600px"
-        title="Carte monnaie-libre"
-      />
-    </section>
+    <HomeMap />
   </div>
 </template>
 
 <script>
-import FaviconMap from '~/static/img/favicon-map-g1.svg?inline'
-
 export default {
   name: 'HomePage',
-  components: {
-    FaviconMap,
-  },
   async asyncData({ $content }) {
     const hero = await $content('ui/home-hero').fetch()
     const intro = await $content('ui/home-intro').fetch()