Skip to content

Add loading overlay to sign-in page during login#110

Draft
Copilot wants to merge 3 commits intomainfrom
copilot/add-loading-state-to-sign-in
Draft

Add loading overlay to sign-in page during login#110
Copilot wants to merge 3 commits intomainfrom
copilot/add-loading-state-to-sign-in

Conversation

Copy link
Copy Markdown
Contributor

Copilot AI commented Apr 14, 2026

No visual feedback was shown between login submission and account page redirect, leaving users uncertain whether the action was processing.

Changes

  • Backdrop + CircularProgress overlay renders over the full page while login is in progress; uses zIndex: theme.zIndex.drawer + 1 to sit above all content
  • Two loading sources drive isLoading:
    • Redux userProfileStatus === 'login_in' — covers email/password flow (already set by the login action)
    • Local isOAuthLoading state — covers Google/GitHub/Apple OAuth flows where signInWithPopup is async and not reflected in Redux until after the popup resolves
  • isOAuthLoading is cleared on all three promise exit paths (no-email error, dispatch success, catch) to prevent a stuck spinner
  • aria-label="Signing in..." added to CircularProgress for screen reader accessibility
const isLoading = userProfileStatus === 'login_in' || isOAuthLoading;

<Backdrop open={isLoading} sx={{ zIndex: (theme) => theme.zIndex.drawer + 1 }}>
  <CircularProgress aria-label='Signing in...' />
</Backdrop>

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

  • download.cypress.io
    • Triggering command: /opt/hostedtoolcache/node/24.14.1/x64/bin/node /opt/hostedtoolcache/node/24.14.1/x64/bin/node index.js --exec install (dns block)
    • Triggering command: /opt/hostedtoolcache/node/24.14.1/x64/bin/node /opt/hostedtoolcache/node/24.14.1/x64/bin/node dist/index.js --exec install (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

Copilot AI linked an issue Apr 14, 2026 that may be closed by this pull request
@vercel
Copy link
Copy Markdown

vercel bot commented Apr 14, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
mobilitydatabase-web Ready Ready Preview, Comment Apr 14, 2026 2:03pm

Request Review

@CLAassistant
Copy link
Copy Markdown

CLA assistant check
Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
You have signed the CLA already but the status is still pending? Let us recheck it.

Copilot AI changed the title [WIP] Add loading state on user login process Add loading overlay to sign-in page during login Apr 14, 2026
Copilot AI requested a review from Alessandro100 April 14, 2026 12:25
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@copilot this is the incorrect loading state to account for. The loading state needs to come after the dispatch dispatch(loginWithProvider({ oauthProvider, userCredential }));. There needs to be a way for this component to communicate with the store to display a loading state before the page will naturally navigate automatically (on success) or display an error (on failure)

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed in 8bc161c. The setIsOAuthLoading(false) call before dispatch(loginWithProvider(...)) has been removed, so the overlay now persists through the entire saga execution (getUserFromSession, retrieveUserInformation, loginSuccess). The component clears isOAuthLoading via a new useEffect that watches emailLoginError — this fires when the saga fails and dispatches loginFail. On the happy path the overlay simply stays visible until loginSuccess triggers navigation away from the page.

Copy link
Copy Markdown
Contributor Author

Copilot AI commented Apr 14, 2026

Just as a heads up, I was blocked by some firewall rules while working on your feedback. Expand below for details.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

  • download.cypress.io
    • Triggering command: /opt/hostedtoolcache/node/24.14.1/x64/bin/node /opt/hostedtoolcache/node/24.14.1/x64/bin/node index.js --exec install (dns block)
    • Triggering command: /opt/hostedtoolcache/node/24.14.1/x64/bin/node /opt/hostedtoolcache/node/24.14.1/x64/bin/node dist/index.js --exec install (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

dispatch(verifyEmail());
}
if (userCredential.user.email == null) {
setIsOAuthLoading(false);
Copy link
Copy Markdown
Contributor

@Alessandro100 Alessandro100 Apr 14, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@copilot The setIsOAuthLoading(true); should start here

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Loading state when user logs in

3 participants