Wait for the tiles to be loaded to display the map

vicb · Jan 7, 2025 · 9d62788 · 9d62788
1 parent 16ec95f
commit 9d62788
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 3 deletions.
diff --git a/apps/fxc-front/src/app/components/2d/map-element.ts b/apps/fxc-front/src/app/components/2d/map-element.ts
@@ -229,14 +229,25 @@ export class MapElement extends connect(store)(LitElement) {
         document.addEventListener('visibilitychange', () => this.zoomToTracks(), { once: true });
       }
 
-      store.dispatch(setApiLoading(false));
+      // Wait for the tiles to be loaded (or timeout) to hide the splashscreen.
+      let splashResolve: () => void;
+      const splashPromise = new Promise<void>((r) => (splashResolve = r));
+      const to = setTimeout(() => splashResolve(), 4000);
+      google.maps.event.addListenerOnce(this.map, 'tilesloaded', () => {
+        splashResolve();
+        clearTimeout(to);
+      });
+      splashPromise.then(() => store.dispatch(setApiLoading(false)));
     });
   }
 
   disconnectedCallback(): void {
     super.disconnectedCallback();
     this.subscriptions.forEach((sub) => sub());
     this.subscriptions.length = 0;
+    if (this.map) {
+      google.maps.event.clearInstanceListeners(this.map);
+    }
     this.map = undefined;
   }
 

diff --git a/apps/fxc-front/tsconfig.json b/apps/fxc-front/tsconfig.json
@@ -2,10 +2,10 @@
   "extends": "../../tsconfig.base.json",
   "files": [],
   "compilerOptions": {
-    "target": "ES2020",
+    "target": "ES2022",
     "useDefineForClassFields": false,
     "module": "ES2020",
-    "lib": ["ES2020", "DOM", "WebWorker"],
+    "lib": ["ES2022", "DOM", "WebWorker"],
     "moduleResolution": "Bundler",
     "strict": true,
     "resolveJsonModule": true,