Revize bc25708c

#re 10797 NoteListView lazy loading -> scroll load more notes

src/components/notes/NotesListView.tsx

@@ -15 +15 @@
     const [newComment, setNewComment] = useState<string>("");
     const [replyingTo, setReplyingTo] = useState<{ messageId: string; userName: string } | null>(null);
 
+    const [renderedNotes, setRenderedNotes] = useState(6);
+
     const cancelRef = React.useRef(null);
 
     const dispatch = useDispatch<AppDispatch>();
@@ -47 +49 @@
         }
     }, [dispatch, props.requestPending]);
 
+    const handleScrollEnd = (event : any) => {
+        const offsetY = event.nativeEvent.contentOffset.y;
+        const contentHeight = event.nativeEvent.contentSize.height;
+        const screenHeight = event.nativeEvent.layoutMeasurement.height;
+
+        if (offsetY + screenHeight >= contentHeight - 20) {
+            // Load more notes when the user is near the end of the list
+            const nextBatchSize = 5; // Number of notes to render in the next batch
+
+            if((renderedNotes + nextBatchSize) > notes.length && (renderedNotes + nextBatchSize) != notes.length){
+                setRenderedNotes(notes.length);
+                // TODO toast display info all rendered
+            }
+            else{
+                setRenderedNotes(renderedNotes + nextBatchSize);
+                // TODO toast display loading more notes
+            }
+        }
+    };
+
+    console.log(renderedNotes)
+    console.log(notes.length)
+
     return (
         <VStack>
             <Box height={windowHeight - 70 - 160 - (replyingTo ? 40 : 0)} marginBottom={2}>
                 {/* Notes */}
-                <ScrollView contentContainerStyle={{ flexGrow: 1 }}>
+                <ScrollView contentContainerStyle={{ flexGrow: 1 }} onScrollEndDrag={handleScrollEnd}>
                     {
                         notes && notes.length > 0 ? (
                             <VStack>
-                                {notes.map((note, index) => {
-                                    // if(index >= 5){
-                                    //     return null;
-                                    // }
-                                    return (
+                                {
+                                    notes.slice(0, renderedNotes).map((note, index) => (
                                         <NoteView key={index} note={note} handleReply={handleReply} handleDelete={handleDelete} handleEdit={handleEdit} setConfirmDialog={setConfirmDialog} navigation={props.navigation} />
-                                    )
-                                })}
+                                    ))
+                                }
                             </VStack>
                         ) : (
                             <Text>There are no notes.</Text>
@@ -84 +106 @@
                             </IconButton>
                         </Flex>
                     }
-                    
+
 
                     {/* Add comment */}
                     <HStack height={90} >