Enhance map loading 🔧 (#3219)

## 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

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