mail page rest

app/courrier/page.tsx

@@ -774,34 +774,39 @@ export default function MailPage() {
         return;
       }
 
-      // Mark email as read
+      // Set the selected email first to show content immediately
-      const markReadResponse = await fetch(`/api/mail/mark-read`, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({
-          emailId,
-          isRead: true,
-        }),
-      });
-
-      if (!markReadResponse.ok) {
-        console.error('Failed to mark email as read');
-      }
-
-      // Update the email in the list to mark it as read
-      setEmails(prevEmails => 
-        prevEmails.map(email => 
-          email.id === emailId 
-            ? { ...email, read: true }
-            : email
-        )
-      );
-
-      // Set the selected email from the existing list
       setSelectedEmail(emailToSelect);
 
+      // 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);
+        // Don't show error to user since this is a background operation
+      }
+
     } catch (error) {
       console.error('Error selecting email:', error);
       setError('Failed to load email content');