compose mime

app/courrier/page.tsx

@@ -103,20 +103,30 @@ function splitEmailHeadersAndBody(emailBody: string): { headers: string; body: s
 function EmailContent({ email }: { email: Email }) {
   const [content, setContent] = useState<React.ReactNode>(null);
   const [error, setError] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
 
   useEffect(() => {
     let mounted = true;
 
     async function loadContent() {
+      if (!email) return;
+      
+      setIsLoading(true);
       try {
         if (!email.body) {
-          if (mounted) setContent(null);
+          if (mounted) {
+            setContent(null);
+            setIsLoading(false);
+          }
           return;
         }
 
         const formattedEmail = email.body.trim();
         if (!formattedEmail) {
-          if (mounted) setContent(null);
+          if (mounted) {
+            setContent(null);
+            setIsLoading(false);
+          }
           return;
         }
 
@@ -140,12 +150,14 @@ function EmailContent({ email }: { email: Email }) {
             setContent(null);
           }
           setError(null);
+          setIsLoading(false);
         }
       } catch (err) {
         console.error('Error rendering email content:', err);
         if (mounted) {
           setError('Error rendering email content. Please try again.');
           setContent(null);
+          setIsLoading(false);
         }
       }
     }
@@ -155,7 +167,15 @@ function EmailContent({ email }: { email: Email }) {
     return () => {
       mounted = false;
     };
-  }, [email.body]);
+  }, [email?.body]);
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center py-8">
+        <div className="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-blue-500"></div>
+      </div>
+    );
+  }
 
   if (error) {
     return <div className="text-red-500">{error}</div>;
@@ -589,8 +609,10 @@ export default function CourrierPage() {
       return;
     }
 
+    try {
       // Set the selected email first to show preview immediately
       setSelectedEmail(email);
+      setContentLoading(true);
       
       // Fetch the full email content
       const response = await fetch(`/api/mail/${emailId}`);
@@ -603,11 +625,12 @@ export default function CourrierPage() {
       // Update the email in the list and selected email with full content
       setEmails(prevEmails => prevEmails.map(email => 
         email.id === emailId 
-        ? { ...email, body: fullEmail.body }
+          ? { ...email, body: fullEmail.body || email.body }
           : email
       ));
       
-    setSelectedEmail(prev => prev ? { ...prev, body: fullEmail.body } : prev);
+      setSelectedEmail(prev => prev ? { ...prev, body: fullEmail.body || prev.body } : prev);
+      setContentLoading(false);
 
       // Try to mark as read in the background
       try {
@@ -637,6 +660,10 @@ export default function CourrierPage() {
       } catch (error) {
         console.error('Error marking email as read:', error);
       }
+    } catch (error) {
+      console.error('Error fetching email content:', error);
+      setContentLoading(false);
+    }
   };
 
   // Add these improved handlers