refactor(Home): optimiser les composants avec memo et implémenter le chargement paresseux pour améliorer les performances

Author: ecnivtwelve

src/components/Home/RedirectButton.tsx

@@ -1,24 +1,25 @@
-import type React from "react";
+import React, { memo, useCallback } from "react";
 import { View, Text } from "react-native";
 import { ArrowUpRight } from "lucide-react-native";
 import { NavigationContainerRef, useTheme } from "@react-navigation/native";
 import { TouchableOpacity } from "react-native-gesture-handler";
 import type { RouteParameters } from "@/router/helpers/types";
 
 interface RedirectButtonProps {
-  navigation: NavigationContainerRef<RouteParameters> | null,
-  redirect: keyof RouteParameters
+  navigation: NavigationContainerRef<RouteParameters> | null;
+  redirect: keyof RouteParameters;
 }
 
 const RedirectButton: React.FC<RedirectButtonProps> = ({ navigation, redirect }) => {
   const theme = useTheme();
   const { colors } = theme;
 
+  const handlePress = useCallback(() => {
+    navigation?.navigate(redirect);
+  }, [navigation, redirect]);
+
   return (
-    <TouchableOpacity
-      // @ts-expect-error : on ne prend pas le state des routes en compte ici.
-      onPress={() => navigation?.navigate(redirect)}
-    >
+    <TouchableOpacity onPress={handlePress}>
       <View
         style={{
           flexDirection: "row",
@@ -37,7 +38,6 @@ const RedirectButton: React.FC<RedirectButtonProps> = ({ navigation, redirect })
         <Text style={{ color: colors.text, fontSize: 15, fontFamily: "semibold" }}>
           Voir plus
         </Text>
-
         <ArrowUpRight
           strokeWidth={2.5}
           size={20}
@@ -48,4 +48,4 @@ const RedirectButton: React.FC<RedirectButtonProps> = ({ navigation, redirect })
   );
 };
 
-export default RedirectButton;
+export default memo(RedirectButton);

src/components/Home/Widget.tsx

@@ -1,15 +1,7 @@
-import React, { type FunctionComponent, RefAttributes, useEffect, useRef, useState } from "react";
+import React, { useCallback, useEffect, useRef, useState, memo } from "react";
 import { ActivityIndicator, StyleSheet } from "react-native";
-
 import { useTheme } from "@react-navigation/native";
-
-import Reanimated, {
-  FadeIn,
-  FadeOut,
-  LinearTransition,
-  ZoomIn
-} from "react-native-reanimated";
-
+import Reanimated, { FadeIn, FadeOut, LinearTransition, ZoomIn } from "react-native-reanimated";
 import { animPapillon } from "@/utils/ui/animations";
 import { PressableScale } from "react-native-pressable-scale";
 import { NativeText } from "../Global/NativeComponents";
@@ -18,8 +10,8 @@ import type { RouteParameters } from "@/router/helpers/types";
 import { useOnlineStatus } from "@/hooks/useOnlineStatus";
 
 interface WidgetContainerProps {
-  widget: React.ForwardRefExoticComponent<WidgetProps & RefAttributes<unknown>>
-  navigation?: NativeStackNavigationProp<RouteParameters, keyof RouteParameters>
+  widget: React.ForwardRefExoticComponent<WidgetProps & React.RefAttributes<unknown>>;
+  navigation?: NativeStackNavigationProp<RouteParameters, keyof RouteParameters>;
 }
 
 export interface WidgetProps {
@@ -32,7 +24,7 @@ export interface WidgetProps {
 const Widget: React.FC<WidgetContainerProps> = ({ widget: DynamicWidget, navigation }) => {
   const theme = useTheme();
   const { colors } = theme;
-  const widgetRef = useRef<FunctionComponent<WidgetProps> | null>(null);
+  const widgetRef = useRef<React.FunctionComponent<WidgetProps> | null>(null);
   const { isOnline } = useOnlineStatus();
 
   const [loading, setLoading] = useState(true);
@@ -44,12 +36,12 @@ const Widget: React.FC<WidgetContainerProps> = ({ widget: DynamicWidget, navigat
     }
   }, [isOnline, loading]);
 
-  const handlePress = () => {
+  const handlePress = useCallback(() => {
     const location = (widgetRef.current as any)?.handlePress();
     if (location) {
       navigation?.navigate(location);
     }
-  };
+  }, [navigation]);
 
   return (
     <Reanimated.View
@@ -61,22 +53,11 @@ const Widget: React.FC<WidgetContainerProps> = ({ widget: DynamicWidget, navigat
       entering={animPapillon(ZoomIn).withInitialValues({ transform: [{ scale: 0.7 }], opacity: 0 })}
       exiting={FadeOut.duration(150)}
     >
-      <PressableScale
-        onPress={() => handlePress()}
-      >
+      <PressableScale onPress={handlePress}>
         <Reanimated.View
-          entering={
-            FadeIn.springify().mass(1).damping(20).stiffness(300)
-          }
-          exiting={
-            FadeOut
-          }
-          style={[
-            styles.widget,
-            {
-              backgroundColor: colors.card,
-            }
-          ]}
+          entering={FadeIn.springify().mass(1).damping(20).stiffness(300)}
+          exiting={FadeOut}
+          style={[styles.widget, { backgroundColor: colors.card }]}
         >
           {loading && (
             <Reanimated.View
@@ -94,20 +75,17 @@ const Widget: React.FC<WidgetContainerProps> = ({ widget: DynamicWidget, navigat
               exiting={FadeOut.duration(150)}
             >
               <ActivityIndicator />
-              <NativeText variant="subtitle">
-                Chargement...
-              </NativeText>
+              <NativeText variant="subtitle">Chargement...</NativeText>
             </Reanimated.View>
           )}
-
           <Reanimated.View
             style={[
               styles.widgetContent,
               {
                 backgroundColor: theme.dark ? colors.primary + "09" : colors.primary + "11",
                 overflow: "hidden",
                 opacity: loading ? 0 : 1,
-              }
+              },
             ]}
           >
             <DynamicWidget
@@ -118,7 +96,6 @@ const Widget: React.FC<WidgetContainerProps> = ({ widget: DynamicWidget, navigat
               hidden={hidden}
             />
           </Reanimated.View>
-
         </Reanimated.View>
       </PressableScale>
     </Reanimated.View>
@@ -135,14 +112,10 @@ const styles = StyleSheet.create({
     borderRadius: 17,
     borderCurve: "continuous",
     shadowColor: "#000",
-    shadowOffset: {
-      width: 0,
-      height: 0.5,
-    },
+    shadowOffset: { width: 0, height: 0.5 },
     shadowOpacity: 0.3,
     shadowRadius: 3,
   },
-
   widgetContent: {
     width: "100%",
     height: "100%",
@@ -152,4 +125,4 @@ const styles = StyleSheet.create({
   },
 });
 
-export default Widget;
+export default memo(Widget);

src/components/Home/WidgetHeader.tsx

@@ -1,16 +1,16 @@
+import React, { memo } from "react";
 import { useTheme } from "@react-navigation/native";
-import React, { cloneElement } from "react";
 import { View, Text, ActivityIndicator } from "react-native";
 
 const WidgetHeader: React.FC<{
-  title: string
-  icon?: React.ReactElement
-  loading?: boolean
+  title: string;
+  icon?: React.ReactElement;
+  loading?: boolean;
 }> = ({ icon, title, loading }) => {
   const theme = useTheme();
   const { colors } = theme;
 
-  const clonedIcon = icon && cloneElement(icon, {
+  const clonedIcon = icon && React.cloneElement(icon, {
     size: 20,
     strokeWidth: 2.3,
     color: colors.text,
@@ -27,7 +27,6 @@ const WidgetHeader: React.FC<{
       }}
     >
       {clonedIcon}
-
       <Text
         style={{
           color: colors.text,
@@ -38,12 +37,9 @@ const WidgetHeader: React.FC<{
       >
         {title}
       </Text>
-
-      {loading && (
-        <ActivityIndicator />
-      )}
+      {loading && <ActivityIndicator />}
     </View>
   );
 };
 
-export default WidgetHeader;
+export default memo(WidgetHeader);

src/views/account/Home/ElementIndex.tsx

@@ -1,30 +1,32 @@
-import AttendanceElement from "./Elements/AttendanceElement";
-import GradesElement from "./Elements/GradesElement";
-import HomeworksElement from "./Elements/HomeworksElement";
-import TimetableElement from "./Elements/TimetableElement";
-import React from "react";
+import React, { lazy } from "react";
 
-export const Elements = [
+// Lazy load components to improve initial load performance
+const AttendanceElement = lazy(() => import("./Elements/AttendanceElement"));
+const GradesElement = lazy(() => import("./Elements/GradesElement"));
+const HomeworksElement = lazy(() => import("./Elements/HomeworksElement"));
+const TimetableElement = lazy(() => import("./Elements/TimetableElement"));
+
+export type Element = {
+  id: string;
+  component: React.LazyExoticComponent<React.FC<any>>; // Use LazyExoticComponent for lazy-loaded components
+  importance?: number;
+};
+
+export const Elements: Element[] = [
   {
-    id:  "timetable",
+    id: "timetable",
     component: TimetableElement,
   },
   {
-    id:  "grades",
+    id: "grades",
     component: GradesElement,
   },
   {
-    id:  "attendance",
+    id: "attendance",
     component: AttendanceElement,
   },
   {
-    id:  "homeworks",
+    id: "homeworks",
     component: HomeworksElement,
-  }
+  },
 ];
-
-export type Element = {
-  id: string
-  component: React.FC<any>
-  importance?: number
-};

src/views/account/Home/ModalContent.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState, useMemo } from "react";
+import React, { useCallback, useEffect, useState, useMemo, memo } from "react";
 import { NativeList, NativeText } from "@/components/Global/NativeComponents";
 import Reanimated, { FadeInUp, FadeOutDown, LinearTransition } from "react-native-reanimated";
 import { Sparkles, X } from "lucide-react-native";
@@ -169,4 +169,4 @@ const ModalContent: React.FC<ModalContentProps> = ({ navigation, refresh, endRef
   );
 };
 
-export default ModalContent;
+export default memo(ModalContent);