update TimelineScrollList only when the active tab is 'label'

Leaflet map encounters an error when prerendered, so we need to render the TimelineScrollList component when the active tab is 'label'
'shouldUpdateTimeline' state is used to determine whether to render the TimelineScrollList or not

www/js/Main.tsx

@@ -1,7 +1,7 @@
 /* Once onboarding is done, this is the main app content.
   Includes the bottom navigation bar and each of the tabs. */
 
-import React from 'react';
+import React, { useEffect } from 'react';
 import { useContext, useMemo, useState } from 'react';
 import { BottomNavigation, useTheme } from 'react-native-paper';
 import { AppContext } from './App';
@@ -55,6 +55,12 @@ const Main = () => {
     return showMetrics ? defaultRoutes(t) : defaultRoutes(t).filter((r) => r.key != 'metrics');
   }, [appConfig, t]);
 
+  useEffect(() => {
+    const { setShouldUpdateTimeline } = timelineContext;
+    // update TimelineScrollList component only when the active tab is 'label' to fix leaflet map issue
+    setShouldUpdateTimeline(!index);
+  }, [index]);
+
   return (
     <TimelineContext.Provider value={timelineContext}>
       <BottomNavigation

www/js/TimelineContext.ts

@@ -50,6 +50,8 @@ type ContextProps = {
   loadMoreDays: (when: 'past' | 'future', nDays: number) => void;
   loadSpecificWeek: (d: string) => void;
   refreshTimeline: () => void;
+  shouldUpdateTimeline: Boolean;
+  setShouldUpdateTimeline: React.Dispatch<React.SetStateAction<boolean>>;
 };
 
 export const useTimelineContext = (): ContextProps => {
@@ -69,6 +71,9 @@ export const useTimelineContext = (): ContextProps => {
   const [timelineLabelMap, setTimelineLabelMap] = useState<TimelineLabelMap | null>(null);
   const [timelineNotesMap, setTimelineNotesMap] = useState<TimelineNotesMap | null>(null);
   const [refreshTime, setRefreshTime] = useState<Date | null>(null);
+  // Leaflet map encounters an error when prerendered, so we need to render the TimelineScrollList component when the active tab is 'label'
+  // 'shouldUpdateTimeline' gets updated based on the current tab index, and we can use it to determine whether to render the timeline or not
+  const [shouldUpdateTimeline, setShouldUpdateTimeline] = useState(true);
 
   // initialization, once the appConfig is loaded
   useEffect(() => {
@@ -356,6 +361,8 @@ export const useTimelineContext = (): ContextProps => {
     notesFor,
     confirmedModeFor,
     addUserInputToEntry,
+    shouldUpdateTimeline,
+    setShouldUpdateTimeline,
   };
 };
 

www/js/diary/list/LabelListScreen.tsx

@@ -12,8 +12,13 @@ import { displayErrorMsg } from '../../plugin/logger';
 
 const LabelListScreen = () => {
   const { filterInputs, setFilterInputs, displayedEntries } = useContext(LabelTabContext);
-  const { timelineMap, loadSpecificWeek, timelineIsLoading, refreshTimeline } =
-    useContext(TimelineContext);
+  const {
+    timelineMap,
+    loadSpecificWeek,
+    timelineIsLoading,
+    refreshTimeline,
+    shouldUpdateTimeline,
+  } = useContext(TimelineContext);
   const { colors } = useTheme();
 
   return (
@@ -42,7 +47,7 @@ const LabelListScreen = () => {
         />
       </NavBar>
       <View style={{ flex: 1, backgroundColor: colors.background }}>
-        <TimelineScrollList listEntries={displayedEntries} />
+        {shouldUpdateTimeline && <TimelineScrollList listEntries={displayedEntries} />}
       </View>
     </>
   );