From eebe3a7dbc39d4d54015e26e57225bc914bbbdf2 Mon Sep 17 00:00:00 2001
From: FloPinguin <25036848+FloPinguin@users.noreply.github.com>
Date: Mon, 16 Feb 2026 20:45:16 +0100
Subject: [PATCH] =?UTF-8?q?Enhance=20map=20loading=20=F0=9F=94=A7=20(#3219?=
 =?UTF-8?q?)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Description:

While loading the main page we also load a lot of map manifests and
thumbnails.
On prod its especially extreme, because we don't have "featured maps"
there (186 json requests!).
With this PR we only load the files when the map display is in the
viewport.

On main.openfront.dev (main page load):

<img width="425" height="539" alt="image"
src="https://github.com/user-attachments/assets/156338d2-7a3f-4518-a726-cb3dec3df908"
/>

## Please complete the following:

- [X] I have added screenshots for all UI updates
- [X] I process any text displayed to the user through translateText()
and I've added it to the en.json file
- [X] I have added relevant tests to the test directory
- [X] I confirm I have thoroughly tested these changes and take full
responsibility for any bugs introduced

## Please put your Discord username so you can be contacted if a bug or
regression is found:

FloPinguin
---
 src/client/components/map/MapDisplay.ts | 20 +++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

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() {