panel 2 courier api restore

app/courrier/page.tsx

@@ -546,6 +546,25 @@ export default function CourrierPage() {
           throw new Error(errorData.error || 'Failed to check credentials');
         }
         
+        // First do a quick request just for folders
+        try {
+          const folderResponse = await fetch('/api/courrier?folder=INBOX&page=1&limit=1');
+          if (folderResponse.ok) {
+            const folderData = await folderResponse.json();
+            console.log('Preloading folders:', folderData.folders);
+            if (folderData.folders && folderData.folders.length > 0) {
+              setAvailableFolders(folderData.folders);
+              setAccounts(prev => prev.map(account => 
+                account.id === 1 
+                  ? { ...account, folders: folderData.folders } 
+                  : account
+              ));
+            }
+          }
+        } catch (error) {
+          console.warn('Error preloading folders:', error);
+        }
+        
         // Then load emails (forced fetch with timestamp)
         const timestamp = Date.now();
         const emailResponse = await fetch(
@@ -1565,6 +1584,69 @@ export default function CourrierPage() {
     loadEmails();
   }, [currentView]);
 
+  // Improve the folder loading logic with a delay and better reliability
+  useEffect(() => {
+    let isMounted = true; // For cleanup
+    
+    const loadFolders = async () => {
+      // Only load if we don't have folders yet and we're not already loading
+      if ((!accounts[1]?.folders || accounts[1]?.folders?.length === 0) && !loading) {
+        console.log('Explicitly loading folders with delay...');
+        
+        // Set a small delay to ensure other loading operations have completed
+        setTimeout(async () => {
+          if (!isMounted) return;
+          
+          setLoading(true);
+          try {
+            // Make a specific request just to get folders
+            const timestamp = Date.now(); // Cache busting
+            const response = await fetch(`/api/courrier?folder=INBOX&page=1&limit=1&skipCache=true&_t=${timestamp}`, {
+              headers: {
+                'Cache-Control': 'no-cache, no-store, must-revalidate',
+                'Pragma': 'no-cache'
+              }
+            });
+            
+            if (response.ok) {
+              const data = await response.json();
+              if (data.folders && data.folders.length > 0) {
+                console.log('Successfully loaded folders:', data.folders);
+                
+                if (isMounted) {
+                  setAvailableFolders(data.folders);
+                  
+                  // Update the mail account with folders
+                  setAccounts(prev => prev.map(account => 
+                    account.id === 1 
+                      ? { ...account, folders: data.folders } 
+                      : account
+                  ));
+                }
+              } else {
+                console.warn('No folders found in response');
+              }
+            } else {
+              console.error('Folder request failed:', response.status);
+            }
+          } catch (error) {
+            console.error('Error explicitly loading folders:', error);
+          } finally {
+            if (isMounted) {
+              setLoading(false);
+            }
+          }
+        }, 500); // 500ms delay
+      }
+    };
+
+    loadFolders();
+    
+    return () => {
+      isMounted = false;
+    };
+  }, [accounts, loading]);
+
   if (error) {
     return (
       <div className="flex h-[calc(100vh-theme(spacing.12))] items-center justify-center bg-gray-100 mt-12">
@@ -1708,10 +1790,15 @@ export default function CourrierPage() {
                                 </Button>
                               ))
                             ) : (
-                              <div className="px-2 py-2 text-xs text-gray-400">
-                                <div className="flex items-center gap-1.5">
-                                  <RefreshCw className="h-3 w-3" />
-                                  <span>Loading folders...</span>
+                              <div className="px-2 py-2">
+                                <div className="flex flex-col space-y-2">
+                                  {/* Create placeholder folder items with shimmer effect */}
+                                  {Array.from({ length: 5 }).map((_, index) => (
+                                    <div key={index} className="flex items-center gap-1.5 animate-pulse">
+                                      <div className="h-3.5 w-3.5 bg-gray-200 rounded-sm"></div>
+                                      <div className="h-3 w-24 bg-gray-200 rounded"></div>
+                                    </div>
+                                  ))}
                                 </div>
                               </div>
                             )}