@messenger-box/platform-mobile 10.0.3-alpha.22 → 10.0.3-alpha.23

package/src/screens/inbox/containers/Dialogs.tsx

@@ -362,7 +362,8 @@ const DialogsComponent = (props: InboxProps) => {
                 // Calculate skip based on page number (pagination)
                 const skipCount = (pageNum - 1) * 15;
 
-                const { data } = await getChannelsRefetch({
+                // Add timeout to prevent hanging requests
+                const fetchPromise = getChannelsRefetch({
                     role: channelRole,
                     criteria: channelFilters,
                     supportServices: supportServices ? true : false,
@@ -373,14 +374,43 @@ const DialogsComponent = (props: InboxProps) => {
                     skip: skipCount,
                 });
 
+                // Set a timeout to abort long-running requests
+                const timeoutPromise = new Promise((_, reject) =>
+                    setTimeout(() => reject(new Error('Request timeout')), 8000),
+                );
+
+                // Race the fetch against the timeout
+                const result = (await Promise.race([fetchPromise, timeoutPromise])) as any;
+                const data = result?.data || {};
+
                 const allChannels = [...(data?.supportServiceChannels ?? []), ...(data?.channelsByUser ?? [])];
+
+                // Optimize filtering by using more efficient approach
                 const filteredChannels =
-                    allChannels?.filter((c) =>
-                        c.members.some(
-                            (u) => u !== null && u?.user?.id != auth?.id && u.user.__typename == 'UserAccount',
-                        ),
-                    ) ?? [];
-                const sortedChannels = (filteredChannels && orderBy(filteredChannels, ['updatedAt'], ['desc'])) || [];
+                    allChannels?.filter((c) => {
+                        if (!c || !c.members) return false;
+
+                        // Early return pattern for better performance
+                        for (const member of c.members) {
+                            if (
+                                member &&
+                                member.user &&
+                                member.user.id !== auth?.id &&
+                                member.user.__typename === 'UserAccount'
+                            ) {
+                                return true;
+                            }
+                        }
+                        return false;
+                    }) ?? [];
+
+                // Use more efficient sorting
+                const sortedChannels =
+                    filteredChannels.sort((a, b) => {
+                        const dateA = new Date(a.updatedAt);
+                        const dateB = new Date(b.updatedAt);
+                        return dateB.getTime() - dateA.getTime();
+                    }) || [];
 
                 console.log(`📊 Processed channels: ${sortedChannels.length} (page: ${pageNum}, skip: ${skipCount})`);
 
@@ -393,12 +423,11 @@ const DialogsComponent = (props: InboxProps) => {
                     } else {
                         safeSend({
                             type: Actions.FETCH_CHANNELS,
-                            data: { channels: sortedChannels },
+                            data: { channels: sortedChannels, stopLoading: true },
                         });
                     }
 
-                    // Immediately stop loading state instead of waiting
-                    safeSend({ type: Actions.STOP_LOADING });
+                    // No need for another stop loading call as we included stopLoading: true above
                 }
             } catch (error) {
                 console.error('Error fetching channels:', error);
@@ -413,8 +442,7 @@ const DialogsComponent = (props: InboxProps) => {
         [getChannelsRefetch, channelRole, channelFilters, supportServices, auth?.id, safeSend],
     );
 
-    // Add a safety timeout to ensure loading state is eventually cleared
-    // even if the fetchChannelsDirectly function fails to complete
+    // Optimize safety timeout to use a shorter duration
     useEffect(() => {
         if (loading) {
             const safetyTimeout = setTimeout(() => {
@@ -422,7 +450,7 @@ const DialogsComponent = (props: InboxProps) => {
                 if (isMountedRef.current) {
                     safeSend({ type: Actions.STOP_LOADING });
                 }
-            }, 5000); // 5 seconds safety timeout
+            }, 3000); // Reduced from 5000 to 3000 ms
 
             return () => clearTimeout(safetyTimeout);
         }
@@ -697,9 +725,12 @@ const DialogsComponent = (props: InboxProps) => {
                 contentContainerStyle={{ minHeight: '100%' }}
                 ItemSeparatorComponent={() => <Box className="h-0.5 bg-gray-200" />}
                 renderItem={({ item: channel }) => {
+                    // Use memoized key for better list performance
+                    const key = `${channel.type === RoomType.Service ? 'service' : 'direct'}-${channel.id}`;
+
                     return channel?.type === RoomType.Service ? (
                         <ServiceDialogsListItem
-                            key={`service-${channel.id}`}
+                            key={key}
                             onOpen={handleSelectServiceChannel}
                             currentUser={auth}
                             channel={channel}
@@ -709,12 +740,12 @@ const DialogsComponent = (props: InboxProps) => {
                         />
                     ) : (
                         <DialogsListItem
-                            key={`direct-${channel.id}`}
+                            key={key}
                             onOpen={handleSelectChannel}
                             currentUser={auth}
                             channel={channel}
                             selectedChannelId={selectedChannelId}
-                            forceRefresh={true}
+                            forceRefresh={false} // Change to false to avoid unnecessary refreshes
                         />
                     );
                 }}
@@ -726,12 +757,17 @@ const DialogsComponent = (props: InboxProps) => {
                     ) : null
                 }
                 onEndReached={handleLoadMore}
-                onEndReachedThreshold={0.3}
-                initialNumToRender={10}
-                maxToRenderPerBatch={10}
-                windowSize={10}
+                onEndReachedThreshold={0.5} // Increased from 0.3 for earlier loading
+                initialNumToRender={5} // Reduced from 10 for faster initial render
+                maxToRenderPerBatch={5} // Reduced from 10 for smoother rendering
+                windowSize={5} // Reduced from 10 to maintain fewer items in memory
                 removeClippedSubviews={true}
-                updateCellsBatchingPeriod={50}
+                updateCellsBatchingPeriod={100} // Increased from 50 to batch updates better
+                getItemLayout={(data, index) =>
+                    // Pre-calculate item dimensions for more efficient rendering
+                    ({ length: 80, offset: 80 * index, index })
+                }
+                keyExtractor={(item) => `channel-${item.id}`}
                 ListEmptyComponent={() => {
                     console.log('Rendering ListEmptyComponent', { loading, refreshing, stateValue: state.value });
 
@@ -785,7 +821,6 @@ const DialogsComponent = (props: InboxProps) => {
                         </Box>
                     );
                 }}
-                keyExtractor={(item) => `channel-${item.id}`}
             />
         </Box>
     );