mime change

app/courrier/page.tsx

@@ -110,40 +110,72 @@ function splitEmailHeadersAndBody(emailBody: string): { headers: string; body: s
   };
 }
 
-async function renderEmailContent(email: Email) {
+function EmailContent({ email }: { email: Email }) {
-  try {
+  const [content, setContent] = useState<React.ReactNode>(null);
-    if (!email.body) return null;
+  const [error, setError] = useState<string | null>(null);
 
-    // Ensure the email content is properly formatted
+  useEffect(() => {
-    const formattedEmail = email.body.trim();
+    let mounted = true;
-    if (!formattedEmail) return null;
 
-    const parsedEmail = await decodeEmail(formattedEmail);
+    async function loadContent() {
-    
+      try {
-    if (parsedEmail.html) {
+        if (!email.body) {
-      return (
+          if (mounted) setContent(null);
-        <div 
+          return;
-          className="email-content prose prose-sm max-w-none dark:prose-invert"
+        }
-          dangerouslySetInnerHTML={{ __html: parsedEmail.html }}
+
-        />
+        const formattedEmail = email.body.trim();
-      );
+        if (!formattedEmail) {
-    } else if (parsedEmail.text) {
+          if (mounted) setContent(null);
-      return (
+          return;
-        <div className="email-content whitespace-pre-wrap">
+        }
-          {parsedEmail.text}
+
-        </div>
+        const parsedEmail = await decodeEmail(formattedEmail);
-      );
+        
+        if (mounted) {
+          if (parsedEmail.html) {
+            setContent(
+              <div 
+                className="email-content prose prose-sm max-w-none dark:prose-invert"
+                dangerouslySetInnerHTML={{ __html: parsedEmail.html }}
+              />
+            );
+          } else if (parsedEmail.text) {
+            setContent(
+              <div className="email-content whitespace-pre-wrap">
+                {parsedEmail.text}
+              </div>
+            );
+          } else {
+            setContent(null);
+          }
+          setError(null);
+        }
+      } catch (err) {
+        console.error('Error rendering email content:', err);
+        if (mounted) {
+          setError('Error rendering email content. Please try again.');
+          setContent(null);
+        }
+      }
     }
-    
+
-    return null;
+    loadContent();
-  } catch (error) {
+
-    console.error('Error rendering email content:', error);
+    return () => {
-    return (
+      mounted = false;
-      <div className="text-red-500">
+    };
-        Error rendering email content. Please try again.
+  }, [email.body]);
-      </div>
+
-    );
+  if (error) {
+    return <div className="text-red-500">{error}</div>;
   }
+
+  return content;
+}
+
+function renderEmailContent(email: Email) {
+  return <EmailContent email={email} />;
 }
 
 function renderAttachments(attachments: MailParserAttachment[]) {