From 9ecd0e12c8b8257ae03004ed499f6bdab32b322f Mon Sep 17 00:00:00 2001
From: Agent Zero <agent@media-on.de>
Date: Mon, 20 Jul 2026 14:15:08 +0200
Subject: [PATCH] =?UTF-8?q?fix:=20async=20race=20condition=20in=20loadMail?=
 =?UTF-8?q?s=20=E2=80=94=20responses=20from=20old=20folder=20were=20overwr?=
 =?UTF-8?q?iting=20current=20folder?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- When user switches folders quickly, multiple fetchMails requests are in flight
- Responses arrive out of order, last response wins regardless of which folder it was for
- Now loadMails checks selectedFolderIdRef before applying results
- Only updates mails state if the response is for the currently selected folder
---
 frontend/src/pages/Mail.tsx | 27 +++++++++++++++++++--------
 1 file changed, 19 insertions(+), 8 deletions(-)

diff --git a/frontend/src/pages/Mail.tsx b/frontend/src/pages/Mail.tsx
index 52f3c2f..b4bf976 100644
--- a/frontend/src/pages/Mail.tsx
+++ b/frontend/src/pages/Mail.tsx
@@ -152,23 +152,34 @@ export function MailPage() {
   // Load mails when folder or page changes
   const loadMails = useCallback(async () => {
     if (!selectedFolderId) return;
+    const currentFolderId = selectedFolderId;
     setLoadingMails(true);
     try {
       if (searchQuery.trim()) {
         const result = await searchMails(searchQuery);
-        setMails(result.mails);
-        setMailsTotal(result.total);
+        // Only update if still on the same folder
+        if (selectedFolderIdRef.current === currentFolderId) {
+          setMails(result.mails);
+          setMailsTotal(result.total);
+        }
       } else {
-        const result = await fetchMails(selectedFolderId, mailsPage, sortBy, sortOrder);
-        setMails(result.mails);
-        setMailsTotal(result.total);
+        const result = await fetchMails(currentFolderId, mailsPage, sortBy, sortOrder);
+        // Only update if still on the same folder
+        if (selectedFolderIdRef.current === currentFolderId) {
+          setMails(result.mails);
+          setMailsTotal(result.total);
+        }
       }
     } catch (err) {
       const msg = err instanceof Error ? err.message : String(err);
-      setError(msg);
-      setMails([]);
+      if (selectedFolderIdRef.current === currentFolderId) {
+        setError(msg);
+        setMails([]);
+      }
+    }
+    if (selectedFolderIdRef.current === currentFolderId) {
+      setLoadingMails(false);
     }
-    setLoadingMails(false);
   }, [selectedFolderId, mailsPage, searchQuery, sortBy, sortOrder]);
 
   useEffect(() => {