From b8e8fe1c94bcbde9104ea7554f2461020fc4a8b2 Mon Sep 17 00:00:00 2001
From: orionna319 <85230052+orionna319@users.noreply.github.com>
Date: Wed, 23 Oct 2024 14:22:34 +0800
Subject: [PATCH] perf: listen to `fullscreenchange` instead of `onRender`
 resize (#729)

---
 src/components/RunMap/index.tsx | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/components/RunMap/index.tsx b/src/components/RunMap/index.tsx
index c5cc8dddf39..ceb6a0f5d5e 100644
--- a/src/components/RunMap/index.tsx
+++ b/src/components/RunMap/index.tsx
@@ -1,5 +1,5 @@
 import MapboxLanguage from '@mapbox/mapbox-gl-language';
-import React, {useRef, useCallback, useState} from 'react';
+import React, {useRef, useCallback, useState, useEffect} from 'react';
 import Map, {Layer, Source, FullscreenControl, NavigationControl, MapRef} from 'react-map-gl';
 import {MapInstance} from "react-map-gl/src/types/lib";
 import useActivities from '@/hooks/useActivities';
@@ -128,6 +128,18 @@ const RunMap = ({
     opacity: 0.3,
   };
 
+  useEffect(() => {
+    const handleFullscreenChange = () => {
+      if (mapRef.current) {
+        mapRef.current.getMap().resize();
+      }
+    };
+    document.addEventListener('fullscreenchange', handleFullscreenChange);
+    return () => {
+      document.removeEventListener('fullscreenchange', handleFullscreenChange);
+    };
+  }, []);
+
   return (
     <Map
       {...viewState}
@@ -136,7 +148,6 @@ const RunMap = ({
       mapStyle="mapbox://styles/mapbox/dark-v10"
       ref={mapRefCallback}
       mapboxAccessToken={MAPBOX_TOKEN}
-      onRender={(event) => event.target.resize()}
     >
       <RunMapButtons changeYear={changeYear} thisYear={thisYear} />
       <Source id="data" type="geojson" data={geoData}>