feat: optimize TimeTravel mounting and display logic

- mount TimeTravel only when selectedTab = timeTravel for the first time
- unmount TimeTravel only while moving off the single project page
- prevent unnecessary reloads of tiles in comparison maps

Author: mohitb35

src/features/projectsV2/ProjectsMap/ProjectMapTabs/ProjectMapTabs.module.scss

@@ -13,7 +13,7 @@
   left: 10px;
   top: 10px;
   margin: 0 auto;
-  z-index: 10;
+  z-index: 40;
   color: $dark;
 }
 .singleTabOption {

src/features/projectsV2/ProjectsMap/ProjectSiteDropDown/SiteDropdown.module.scss

@@ -14,7 +14,7 @@ $layoutPaddingSide: 20px;
   cursor: pointer;
   gap: 18px;
   position: absolute;
-  z-index: 2;
+  z-index: 40;
   top: calc($layoutPaddingTop + 10px);
   right: calc($layoutPaddingSide + 10px);
 }
@@ -61,7 +61,7 @@ $layoutPaddingSide: 20px;
   width: 350px;
   font-size: $fontXSmall;
   position: absolute;
-  z-index: 4;
+  z-index: 50;
   top: 84px;
   right: 30px;
   max-height: 58vh;

src/features/projectsV2/ProjectsMap/TimeTravel/TimeTravel.module.scss

@@ -4,7 +4,9 @@
   position: absolute;
   inset: 0;
   background: rgba(0, 0, 0, 0.5);
+  z-index: 10;
   :global(.maplibregl-compare) {
+    z-index: 30;
     :global(.compare-swiper-vertical) {
       background-color: $primaryColor;
     }
@@ -14,21 +16,21 @@
 .comparisonMap {
   position: absolute;
   inset: 0;
-  z-index: 1;
+  z-index: 20;
 }
 
 .beforeDropdown {
   position: absolute;
   top: 78px;
   left: 10px;
-  z-index: 2;
+  z-index: 40;
 }
 
 .afterDropdown {
   position: absolute;
   top: 78px;
   right: 10px;
-  z-index: 2;
+  z-index: 40;
 }
 
 .loadingOverlay {
@@ -39,5 +41,18 @@
   justify-content: center;
   background: rgba(0, 0, 0, 0.5);
   color: white;
-  z-index: 2;
+  z-index: 50;
+}
+
+.hidden {
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+}
+
+.visible {
+  opacity: 1;
+  visibility: visible;
+  pointer-events: auto;
+  transition: opacity 0.3s ease;
 }

src/features/projectsV2/ProjectsMap/TimeTravel/index.tsx

@@ -44,9 +44,13 @@ type MapErrorCode = (typeof MAP_ERROR_CODES)[keyof typeof MAP_ERROR_CODES];
 
 interface Props {
   sitesGeoJson: FeatureCollection<Polygon | MultiPolygon, ProjectSite>;
+  isVisible: boolean;
 }
 
-export default function TimeTravel({ sitesGeoJson }: Props): ReactElement {
+export default function TimeTravel({
+  sitesGeoJson,
+  isVisible,
+}: Props): ReactElement {
   const { viewState: mainMapViewState } = useProjectsMap();
   const { setErrors } = useContext(ErrorHandlingContext);
 
@@ -448,7 +452,7 @@ export default function TimeTravel({ sitesGeoJson }: Props): ReactElement {
   };
 
   return (
-    <>
+    <div className={`${isVisible ? styles.visible : styles.hidden}`}>
       <TimeTravelDropdown
         defaultYear={selectedYearBefore}
         defaultSource={selectedSourceBefore}
@@ -486,6 +490,6 @@ export default function TimeTravel({ sitesGeoJson }: Props): ReactElement {
           className={styles.comparisonMap}
         ></div>
       </div>
-    </>
+    </div>
   );
 }

src/features/projectsV2/ProjectsMap/index.tsx

@@ -63,6 +63,7 @@ function ProjectsMap(props: ProjectsMapProps) {
     selectedSamplePlantLocation,
   } = useProjects();
   const [selectedTab, setSelectedTab] = useState<SelectedTab | null>(null);
+  const [wasTimeTravelMounted, setWasTimeTravelMounted] = useState(false);
 
   const sitesGeoJson = useMemo(() => {
     return {
@@ -77,9 +78,16 @@ function ProjectsMap(props: ProjectsMapProps) {
       setSelectedTab('field');
     } else {
       setSelectedTab(null);
+      setWasTimeTravelMounted(false);
     }
   }, [props.page]);
 
+  useEffect(() => {
+    if (selectedTab === 'timeTravel') {
+      setWasTimeTravelMounted(true);
+    }
+  }, [selectedTab]);
+
   useDebouncedEffect(
     () => {
       const map = mapRef.current;
@@ -214,9 +222,15 @@ function ProjectsMap(props: ProjectsMapProps) {
         {shouldShowMapTabs && (
           <MapTabs selectedTab={selectedTab} setSelectedTab={setSelectedTab} />
         )}
-        {selectedTab === 'timeTravel' && (
-          <TimeTravel sitesGeoJson={sitesGeoJson} />
-        )}
+        {shouldShowSingleProjectsView &&
+          (selectedTab === 'timeTravel' || wasTimeTravelMounted) && (
+            <div>
+              <TimeTravel
+                sitesGeoJson={sitesGeoJson}
+                isVisible={selectedTab === 'timeTravel'}
+              />
+            </div>
+          )}
         <Map
           {...viewState}
           {...mapState}