diff --git a/src/client/components/map/MapDisplay.ts b/src/client/components/map/MapDisplay.ts
index 61241eff2..7041e83a9 100644
--- a/src/client/components/map/MapDisplay.ts
+++ b/src/client/components/map/MapDisplay.ts
@@ -15,6 +15,8 @@ export class MapDisplay extends LitElement {
   @state() private mapName: string | null = null;
   @state() private isLoading = true;
   @state() private hasNations = true;
+  private observer: IntersectionObserver | null = null;
+  private dataLoaded = false;
 
   createRenderRoot() {
     return this;
@@ -22,7 +24,23 @@ export class MapDisplay extends LitElement {
 
   connectedCallback() {
     super.connectedCallback();
-    this.loadMapData();
+    this.observer = new IntersectionObserver(
+      (entries) => {
+        if (entries.some((e) => e.isIntersecting) && !this.dataLoaded) {
+          this.dataLoaded = true;
+          this.loadMapData();
+          this.observer?.disconnect();
+        }
+      },
+      { rootMargin: "200px" },
+    );
+    this.observer.observe(this);
+  }
+
+  disconnectedCallback() {
+    this.observer?.disconnect();
+    this.observer = null;
+    super.disconnectedCallback();
   }
 
   private async loadMapData() {