Event calendar rerender optimization attempt

components/pages/calendar/EventCalendar.tsx

@@ -1,6 +1,6 @@
-import React, {useCallback, useMemo} from 'react';
+import React, { useCallback, useMemo, useState, useEffect } from 'react';
 import { Calendar } from "react-native-big-calendar";
-import {StyleSheet} from "react-native";
+import { StyleSheet, View, ActivityIndicator } from "react-native";
 import { useGetEvents } from "@/hooks/firebase/useGetEvents";
 import { useAtom, useAtomValue, useSetAtom } from "jotai";
 import {
@@ -18,7 +18,7 @@ interface EventCalendarProps {
 }
 
 export const EventCalendar: React.FC<EventCalendarProps> = React.memo(({ calendarHeight }) => {
-    const {data: events} = useGetEvents();
+    const { data: events, isLoading } = useGetEvents();
     const { profileData } = useAuthContext();
     const [selectedDate, setSelectedDate] = useAtom(selectedDateAtom);
     const mode = useAtomValue(modeAtom);
@@ -26,6 +26,18 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(({calendar
     const setEventForEdit = useSetAtom(eventForEditAtom);
     const setSelectedNewEndDate = useSetAtom(selectedNewEventDateAtom);
 
+    const [isRendering, setIsRendering] = useState(true);
+
+    useEffect(() => {
+        if (events && mode) {
+            setIsRendering(true);
+            const timeout = setTimeout(() => {
+                setIsRendering(false);
+            }, 300);
+            return () => clearTimeout(timeout);
+        }
+    }, [events, mode]);
+
     const handlePressEvent = useCallback((event: CalendarEvent) => {
         setEditVisible(true);
         setEventForEdit(event);
@@ -61,12 +73,22 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(({calendar
         [mode]
     );
 
+    const memoizedEvents = useMemo(() => events ?? [], [events]);
+
+    if (isLoading || isRendering) {
+        return (
+            <View style={styles.loadingContainer}>
+                <ActivityIndicator size="large" color="#0000ff" />
+            </View>
+        );
+    }
+
     return (
         <Calendar
             bodyContainerStyle={styles.calHeader}
             swipeEnabled
             mode={mode}
-            events={events ?? []}
+            events={memoizedEvents}
             eventCellStyle={memoizedEventCellStyle}
             onPressEvent={handlePressEvent}
             weekStartsOn={memoizedWeekStartsOn}
@@ -95,4 +117,9 @@ const styles = StyleSheet.create({
         width: 38,
         right: 42,
     },
+    loadingContainer: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
 });

contexts/ToDosContext.tsx

@@ -136,7 +136,7 @@ export const ToDosContextProvider: FC<{ children: ReactNode }> = ({
   };
 
   return (
-    <ToDosContext.Provider value={{ toDos, updateToDo, addToDo, maxPoints }}>
+    <ToDosContext.Provider value={{ toDos: toDos ?? [], updateToDo, addToDo, maxPoints }}>
       {children}
     </ToDosContext.Provider>
   );