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,53 +609,60 @@ export default function CourrierPage() {
       return;
     }
 
-    // Set the selected email first to show preview immediately
-    setSelectedEmail(email);
-    
-    // Fetch the full email content
-    const response = await fetch(`/api/mail/${emailId}`);
-    if (!response.ok) {
-      throw new Error('Failed to fetch full email content');
-    }
-    
-    const fullEmail = await response.json();
-    
-    // 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
-    ));
-    
-    setSelectedEmail(prev => prev ? { ...prev, body: fullEmail.body } : prev);
-
-    // Try to mark as read in the background
     try {
-      const markReadResponse = await fetch(`/api/mail/mark-read`, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({
-          emailId,
-          isRead: true,
-        }),
-      });
+      // 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}`);
+      if (!response.ok) {
+        throw new Error('Failed to fetch full email content');
+      }
+      
+      const fullEmail = await response.json();
+      
+      // 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 }
+          : email
+      ));
+      
+      setSelectedEmail(prev => prev ? { ...prev, body: fullEmail.body || prev.body } : prev);
+      setContentLoading(false);
 
-      if (markReadResponse.ok) {
-        // Only update the emails list if the API call was successful
-        setEmails((prevEmails: Email[]) => 
-          prevEmails.map((email: Email): Email => 
-            email.id === emailId 
-              ? { ...email, read: true }
-              : email
-          )
-        );
-      } else {
-        console.error('Failed to mark email as read:', await markReadResponse.text());
+      // Try to mark as read in the background
+      try {
+        const markReadResponse = await fetch(`/api/mail/mark-read`, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({
+            emailId,
+            isRead: true,
+          }),
+        });
+
+        if (markReadResponse.ok) {
+          // Only update the emails list if the API call was successful
+          setEmails((prevEmails: Email[]) => 
+            prevEmails.map((email: Email): Email => 
+              email.id === emailId 
+                ? { ...email, read: true }
+                : email
+            )
+          );
+        } else {
+          console.error('Failed to mark email as read:', await markReadResponse.text());
+        }
+      } catch (error) {
+        console.error('Error marking email as read:', error);
       }
     } catch (error) {
-      console.error('Error marking email as read:', error);
+      console.error('Error fetching email content:', error);
+      setContentLoading(false);
     }
   };