Handle import race conditions and state inconsistencies

[tyler-dane]

Priority

Low (minor improvement)

Feature Description

Problem: Multiple critical race conditions can lead to inconsistent application state and data corruption.

Root Causes:
- No protection against multiple simultaneous OAuth attempts - Import can be triggered multiple times if user rapidly clicks - No cleanup if user navigates away during import - WebSocket connection state not properly managed during navigation

Tasks to Address Issue #2:

1. Implement OAuth flow debouncing - Add loading state check before allowing new OAuth attempts - Disable button during active OAuth flow - Prevent multiple simultaneous authentication requests
2. Add import deduplication logic - Check if import is already in progress before triggering - Implement request cancellation for duplicate imports - Add client-side import state tracking
3. Handle navigation during import - Add cleanup logic in useEffect cleanup function - Cancel ongoing import requests when component unmounts - Implement proper WebSocket disconnection handling
4. Add session state validation - Verify user session before triggering import - Handle session expiration during OAuth flow - Implement proper session refresh logic
5. Implement proper state synchronization - Add WebSocket reconnection logic - Handle import status updates after reconnection - Sync import state across browser tabs

Use Case

No response

Additional Context

• Backend already prevents you from triggering multiple imports at the same time.
• Keep in mind to not invest a lot of time in the form aspect of this, as we will soon be migrating to a form library

[victor-enogwe]

👀 @tyler-dane this issue description needs a review.