Find a better way to manage the loading state of the login page

[nick-y-ito]

Description

We are facing limitations with the third-party component named <Authenticator>, which are causing restrictions in customizing its UI and controlling its behavior. To get around this issue, we are presently using vanilla CSS to override the default style. This approach is not appropriate and must be solved.

Expected Behavior

1. When the user clicks the Sign in with Google button, the loading spinner appears immediately.
2. The user is navigated to a new tab where they can select a Google account.
   • While in this new tab, the loading spinner keeps spinning in the original tab.
3. When selecting a Google account, the newly opened tab gets closed and the user gets navigated to the original page. The user should still see the loading spinner.
4. After a while, the user gets redirected to the home page (the "Groups" page).
5. If the user fails to sign in, they should see a feedback message on the login page after the loading spinner disappears.

Criteria

• [ ] Research the following pages and figure out whether the UI of the login form can be customized without overriding the style using the vanilla CSS
  • https://ui.docs.amplify.aws/react/connected-components/authenticator/customization
  • https://ui.docs.amplify.aws/react/connected-components/authenticator/advanced
• [ ] Achieve the "Expected Behavior"

Notes