diff --git a/app/courrier/page.tsx b/app/courrier/page.tsx
index 1d6aa97a..e2671363 100644
--- a/app/courrier/page.tsx
+++ b/app/courrier/page.tsx
@@ -582,6 +582,33 @@ export default function CourrierPage() {
     return emails.find(email => email.id === selectedEmail?.id);
   };
 
+  // Add an effect to detect and fix stuck loading states
+  useEffect(() => {
+    let timeoutId: NodeJS.Timeout | null = null;
+    
+    // If we have emails but loading state is still true after emails load, it's likely stuck
+    if (emails.length > 0 && (loading || isLoadingInitial)) {
+      console.log('[DEBUG] Detected potential stuck loading state, setting recovery timeout');
+      
+      // Set a timeout to automatically reset the loading state
+      timeoutId = setTimeout(() => {
+        // Double check if still stuck
+        if (emails.length > 0 && (loading || isLoadingInitial)) {
+          console.log('[DEBUG] Confirmed stuck loading state, auto-resetting');
+          setLoading(false);
+          setIsLoadingInitial(false);
+        }
+      }, 3000); // 3 second timeout
+    }
+    
+    // Cleanup
+    return () => {
+      if (timeoutId) {
+        clearTimeout(timeoutId);
+      }
+    };
+  }, [emails.length, loading, isLoadingInitial]);
+
   // Single initialization effect that loads emails correctly on first page load
   useEffect(() => {
     const loadInitialData = async () => {
@@ -817,8 +844,11 @@ export default function CourrierPage() {
         setError(err instanceof Error ? err.message : 'Failed to load data');
       } finally {
         console.log('[DEBUG] Setting loading state to false in finally block');
-        setLoading(false);
-        setIsLoadingInitial(false);
+        // Ensure we reset the loading state after a short delay to make sure React has processed state updates
+        setTimeout(() => {
+          setLoading(false);
+          setIsLoadingInitial(false);
+        }, 100);
       }
     };
     
@@ -1049,19 +1079,25 @@ export default function CourrierPage() {
           className="flex-1 overflow-y-auto"
           onScroll={handleScroll}
         >
-          {/* Only show loading if we don't have emails yet - this prevents stuck loading states */}
-          {(loading || isLoadingInitial) && filteredEmails.length === 0 ? (
+          {/* Always show emails when available, regardless of loading state */}
+          {filteredEmails.length > 0 ? (
+            <div className="divide-y divide-gray-100">
+              {filteredEmails.map((email) => renderEmailListItem(email))}
+              {(isLoadingMore || loading) && (
+                <div className="flex items-center justify-center p-4">
+                  <div className="animate-spin rounded-full h-4 w-4 border-t-2 border-b-2 border-blue-500 mr-2"></div>
+                  <span className="text-xs text-gray-500">Refreshing...</span>
+                </div>
+              )}
+            </div>
+          ) : isLoadingInitial || (loading && emails.length === 0) ? (
             <div className="flex items-center justify-center h-64">
               <div className="flex flex-col items-center">
                 <div className="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-blue-500 mb-4"></div>
                 <p className="text-sm text-gray-500">Loading emails...</p>
-                <p className="text-xs text-gray-400 mt-2">
-                  {loading ? 'Loading state: true' : ''} 
-                  {isLoadingInitial ? 'Loading initial: true' : ''}
-                </p>
               </div>
             </div>
-          ) : filteredEmails.length === 0 ? (
+          ) : (
             <div className="flex flex-col items-center justify-center h-64">
               <Mail className="h-12 w-12 text-gray-400 mb-3" />
               <p className="text-gray-700 text-base font-medium mb-1">
@@ -1085,22 +1121,6 @@ export default function CourrierPage() {
                 <RefreshCw className="h-4 w-4 mr-2" /> Refresh Folder
               </Button>
             </div>
-          ) : (
-            <div className="divide-y divide-gray-100">
-              {filteredEmails.map((email) => renderEmailListItem(email))}
-              {isLoadingMore && (
-                <div className="flex items-center justify-center p-4">
-                  <div className="animate-spin rounded-full h-4 w-4 border-t-2 border-b-2 border-blue-500"></div>
-                </div>
-              )}
-              {/* Show loading indicator at the bottom if we're still loading but have emails */}
-              {(loading || isLoadingInitial) && filteredEmails.length > 0 && (
-                <div className="sticky bottom-0 bg-white bg-opacity-90 py-2 px-4 text-xs text-center text-gray-500 flex items-center justify-center">
-                  <div className="animate-spin rounded-full h-3 w-3 border-t-2 border-b-2 border-blue-500 mr-2"></div>
-                  Refreshing email list...
-                </div>
-              )}
-            </div>
           )}
         </div>
       </div>
@@ -1857,9 +1877,12 @@ export default function CourrierPage() {
       setError('Failed to load emails');
     } finally {
       console.log('[DEBUG] Setting loading states to false in loadEmails finally block');
-      setLoading(false);
-      setIsLoadingMore(false);
-      setIsLoadingInitial(false);
+      // Ensure we reset the loading state after a short delay to make sure React has processed state updates
+      setTimeout(() => {
+        setLoading(false);
+        setIsLoadingMore(false);
+        setIsLoadingInitial(false);
+      }, 100);
     }
   };
   
@@ -1969,6 +1992,32 @@ export default function CourrierPage() {
     fetchImapCredentials();
   }, []);
 
+  // Add ref for tracking component mount status
+  const isComponentMounted = useRef(true);
+  
+  // Add a cleanup effect to reset states on unmount/remount
+  useEffect(() => {
+    // Reset isComponentMounted value on mount
+    isComponentMounted.current = true;
+    
+    // Reset loading states when component mounts
+    const timeoutId = setTimeout(() => {
+      if (isComponentMounted.current && (loading || isLoadingInitial)) {
+        console.log('[DEBUG] Reset loading states on mount');
+        setLoading(false);
+        setIsLoadingInitial(false);
+      }
+    }, 5000); // Longer timeout to avoid race conditions
+    
+    // Return cleanup function
+    return () => {
+      console.log('[DEBUG] Component unmounting, clearing states');
+      isComponentMounted.current = false;
+      clearTimeout(timeoutId);
+      // No need to set states during unmount as component is gone
+    };
+  }, []); // Empty dependency array
+
   if (error) {
     return (
       <div className="flex h-[calc(100vh-theme(spacing.12))] items-center justify-center bg-gray-100 mt-12">