diff --git a/frontend/src/pages/Mail.tsx b/frontend/src/pages/Mail.tsx index 4126f9b..52f3c2f 100644 --- a/frontend/src/pages/Mail.tsx +++ b/frontend/src/pages/Mail.tsx @@ -4,7 +4,7 @@ * Account selection is integrated into the folder tree (left pane). */ -import React, { useState, useEffect, useCallback } from 'react'; +import React, { useState, useEffect, useCallback, useRef } from 'react'; import { useTranslation } from 'react-i18next'; import { Link } from 'react-router-dom'; import { Card } from '@/components/ui/Card'; @@ -82,6 +82,12 @@ export function MailPage() { const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('desc'); const [isSyncing, setIsSyncing] = useState(false); + // Ref to track the current folder ID for async callbacks (prevents race conditions) + const selectedFolderIdRef = useRef(null); + useEffect(() => { + selectedFolderIdRef.current = selectedFolderId; + }, [selectedFolderId]); + // Load accounts const loadAccounts = useCallback(async () => { setLoadingAccounts(true); @@ -183,9 +189,12 @@ export function MailPage() { setSelectedMailIds(new Set()); setActiveView('list'); // Live sync: fetch new mails from IMAP in background, reload after + // Only reload if the user hasn't switched to another folder in the meantime syncFolder(folderId).then(() => { - loadMails(); - loadAllFolders(); + if (selectedFolderIdRef.current === folderId) { + loadMails(); + loadAllFolders(); + } }).catch(() => {}); }, [folders, loadMails, loadAllFolders],