diff --git a/app/courrier/page.tsx b/app/courrier/page.tsx index 6e9a9ae1..46733579 100644 --- a/app/courrier/page.tsx +++ b/app/courrier/page.tsx @@ -626,6 +626,11 @@ export default function CourrierPage() { // Set loading state immediately setLoading(true); + // CRITICAL FIX: Clear email selection BEFORE changing folders + // This prevents stale emails from previous folders from being displayed + logEmailOp('MAILBOX-CHANGE', 'Clearing email selection before folder change'); + handleEmailSelect('', '', ''); + // Clear emails during transition to avoid UI flicker/confusion setEmails([]); @@ -804,6 +809,19 @@ export default function CourrierPage() { // First set loading state to provide visual feedback setLoading(true); + // CRITICAL FIX: Clear current selection to prevent stale email from previous account + // This ensures no emails from the previous account remain selected + logEmailOp('ACCOUNT-SELECT', `CRITICAL FIX: Clearing all email selections to prevent cross-account UI contamination`); + + // Direct clearing of selected email for immediate UI effect + // Clear the selected email in the UI - Panel 3 + handleEmailSelect('', '', ''); + + // Clear any multi-selected emails - Panel 2 + if (selectedEmailIds.length > 0) { + toggleSelectAll(); + } + // Clear current emails to avoid confusion during transition setEmails([]); diff --git a/components/email/EmailPanel.tsx b/components/email/EmailPanel.tsx index 2f2a9fbf..986e2136 100644 --- a/components/email/EmailPanel.tsx +++ b/components/email/EmailPanel.tsx @@ -125,8 +125,18 @@ export default function EmailPanel({ // Load email content when selectedEmail changes useEffect(() => { if (selectedEmail) { + // CRITICAL FIX: Store the current account ID to check for changes + // This helps prevent race conditions during account switching + const currentAccountId = selectedEmail.accountId; + console.log(`EmailPanel: Loading email ${selectedEmail.emailId} from account ${currentAccountId}`); + debouncedFetchEmail(selectedEmail.emailId, selectedEmail.accountId, selectedEmail.folder); setIsComposing(false); + + // Return a cleanup function that can detect and handle account changes + return () => { + console.log(`EmailPanel: Cleaning up email fetch for account ${currentAccountId}`); + }; } }, [selectedEmail, debouncedFetchEmail]); diff --git a/hooks/use-email-fetch.ts b/hooks/use-email-fetch.ts index f1dfcd7b..bfe45ea7 100644 --- a/hooks/use-email-fetch.ts +++ b/hooks/use-email-fetch.ts @@ -49,6 +49,16 @@ export function useEmailFetch({ onEmailLoaded, onError }: UseEmailFetchProps = { return; } + // CRITICAL FIX: Always abort any previous request when fetching a new email + // This prevents race conditions when switching accounts or folders + if (abortControllerRef.current) { + console.log(`useEmailFetch: Aborting previous request to fetch email ${emailId} from account ${accountId}`); + abortControllerRef.current.abort(); + } + + // Create a new abort controller for this request + abortControllerRef.current = new AbortController(); + setState(prev => ({ ...prev, loading: true, error: null })); try {