courrier formatting

components/email/EmailList.tsx

@@ -54,10 +54,13 @@ export default function EmailList({
     // Calculate how close to the bottom we are (in pixels)
     const distanceToBottom = scrollHeight - scrollTop - clientHeight;
     
-    // More aggressive threshold - load more when within 300px of bottom
+    // CRITICAL FIX: Much more aggressive threshold - load more when within 500px of bottom
-    // Only trigger if we have more emails and aren't already loading
+    // Also add double-check with percentage to handle all screen sizes
-    if (distanceToBottom < 300 && hasMoreEmails && !isLoading) {
+    const scrollPercentage = (scrollTop + clientHeight) / scrollHeight;
-      console.log(`[EMAIL_LIST] Near bottom (${distanceToBottom}px), loading more emails`);
+    
+    // Trigger loading when within 500px OR at 80% of the scroll distance
+    if ((distanceToBottom < 500 || scrollPercentage > 0.8) && hasMoreEmails && !isLoading) {
+      console.log(`[EMAIL_LIST] Near bottom (${distanceToBottom}px, ${Math.round(scrollPercentage * 100)}%), loading more emails`);
       onLoadMore();
     }
   };

hooks/use-email-state.ts

@@ -130,12 +130,41 @@ export const useEmailState = () => {
       const response = await fetch(`/api/courrier?${queryParams.toString()}`);
       
       if (!response.ok) {
+        // CRITICAL FIX: Try to recover from fetch errors by retrying with different pagination
+        if (isLoadMore && state.page > 1) {
+          logEmailOp('ERROR_RECOVERY', `Failed to fetch emails for page ${state.page}, attempting to recover by decrementing page`);
+          // If we're loading more and there's an error, just decrement the page to avoid getting stuck
+          dispatch({ type: 'SET_PAGE', payload: state.page - 1 });
+          dispatch({ type: 'SET_LOADING', payload: false });
+          // Also reset total pages to try again
+          dispatch({ type: 'SET_TOTAL_PAGES', payload: state.page });
+          return;
+        }
+        
         const errorData = await response.json();
         throw new Error(errorData.error || 'Failed to fetch emails');
       }
       
       const data = await response.json();
       
+      // CRITICAL FIX: Enhanced empty results handling
+      if (!data.emails || data.emails.length === 0) {
+        // If we're at a page > 1 and got no results, the paging is off, so try again with page 1
+        if (state.page > 1) {
+          logEmailOp('EMPTY_RESULTS', `No emails returned for page ${state.page}, resetting to page 1`);
+          dispatch({ type: 'SET_PAGE', payload: 1 });
+          dispatch({ type: 'SET_LOADING', payload: false });
+          return;
+        }
+        
+        // If we're already at page 1, just update the state with no emails
+        logEmailOp('EMPTY_RESULTS', `No emails found in ${state.currentFolder}`);
+        dispatch({ type: 'SET_EMAILS', payload: [] });
+        dispatch({ type: 'SET_TOTAL_EMAILS', payload: 0 });
+        dispatch({ type: 'SET_TOTAL_PAGES', payload: 0 });
+        return;
+      }
+      
       // Ensure all emails have proper account ID and folder format
       if (Array.isArray(data.emails)) {
         // Log email dates for debugging
@@ -583,16 +612,28 @@ export const useEmailState = () => {
 
   // Handle loading more emails
   const handleLoadMore = useCallback(() => {
-    if (state.page < state.totalPages && !state.isLoading) {
+    if (state.isLoading) {
-      logEmailOp('LOAD_MORE', `Loading more emails: page ${state.page + 1}/${state.totalPages}`);
-      dispatch({ type: 'INCREMENT_PAGE' });
-      // The actual loading will be handled by the useEffect that watches page changes
-    } else if (state.page >= state.totalPages) {
-      logEmailOp('LOAD_MORE', `No more emails to load: page ${state.page}/${state.totalPages}`);
-    } else if (state.isLoading) {
       logEmailOp('LOAD_MORE', `Skipping load more request - already loading`);
+      return;
     }
-  }, [state.page, state.totalPages, state.isLoading, logEmailOp]);
+    
+    if (state.page >= state.totalPages && state.totalPages > 0) {
+      logEmailOp('LOAD_MORE', `No more emails to load: page ${state.page}/${state.totalPages}`);
+      // CRITICAL FIX: Re-fetch the last page to force checking for new emails
+      const { effectiveAccountId } = normalizeFolderAndAccount(state.currentFolder);
+      setTimeout(() => {
+        // Re-fetch the last page in a delay to ensure the user can see there are no more emails
+        logEmailOp('LOAD_MORE', `Re-checking for emails at page ${state.page}`);
+        loadEmails(true, effectiveAccountId);
+      }, 2000);
+      return;
+    } 
+    
+    // Normal case - load the next page
+    logEmailOp('LOAD_MORE', `Loading more emails: page ${state.page + 1}/${state.totalPages || '?'}`);
+    dispatch({ type: 'INCREMENT_PAGE' });
+    // The actual loading will be handled by the useEffect that watches page changes
+  }, [state.page, state.totalPages, state.isLoading, state.currentFolder, loadEmails, logEmailOp]);
 
   // Effect to load emails when folder changes
   useEffect(() => {