Firebaseui-web: Blank widget after auth redirect

[mhuebert]

When a user arrives back at the FirebaseUI widget after authentication, for some period of time—sometimes multiple seconds—they see this blank rectangle with the loading animation:

One of my users emailed me a screenshot of this state today, thinking that I had programmed an error into my app.

I think a message should be displayed to indicate the current status or progress, or show a more ordinary loading indicator—something that a user can make sense of.

[bojeil-google]

We are using the MDL progress bar: https://getmdl.io/components/#loading-section/progress
You can override the CSS to display your own GIF:
The class: .firebaseui-busy-indicator

[mhuebert]

I think the non-intuitiveness may stem from a combination of facts:
a) this is appearing on a fresh pageload (after a redirect), rather than in an existing panel that is reacting to user input, and
b) the loader is at the top of an empty rectangle, which to an average user may look like some kind of mistake, because there is no text indicating what is happening (eg/ "Loading account...").

The most relevant Material Design guidelines example, for 'loading content for the first time' (which should apply here, as we perform this action on pageload), does include a text label on the animation:

Gmail also includes a text label while loading:

And I would reiterate that I have received complaints from ordinary users who believed that even though this flow did sign them in to the app, there must have been an error somewhere because they interpreted the blank rectangle as some kind of mistake or error condition of the app.

A single loading animation in the middle of the screen may be passably intuitive ("ok, the page must be loading"), but the same loading animation at the top of a white rectangle positioned within the middle of a page is, I think, understandably confusing ("what am I supposed to be seeing here?") and could be fixed by including a status message.

[gbittmann]

Based on the suggestion of adjusting the CSS, I did this little bit of CSS to add a label to the bar. Hopefully this will be helpful, and improved upon by others.

.mdl-shadow--2dp {
    box-shadow: none;
}

.firebaseui-info-bar {
    margin-top: 20px;
}

div.mdl-progress::after {
    display: block;
    color: black;
    content: "Authenticating";
    margin: 20px auto;
    text-align: center;
}

.mdl-progress {
    height: 5px;
}

[goodpic]

Thanks @gbittmann for the example! It helped me to quickly fix it. I slightly modified to wrap the CSS (using SCSS) since I use mdl-shadow--2dp on the other places.

#firebaseui-auth-container {
  .firebaseui-info-bar {
    margin-top: 20px;
  }

  .mdl-shadow--2dp {
    box-shadow: none;
  }

  .mdl-progress {
    height: 5px;
  }

  div.mdl-progress::after {
    color: black;
    content: 'Authenticating';
    display: block;
    margin: 20px auto;
    text-align: center;
  }
}

[levithomason]

firebaseui

I think there could be an actual error here. Using firebaseui, I am able to sign in (I think) but the loading state of the card never clears. I've let this sit for several minutes in this state:

I say "I think" because the flow appears to indicate a successful sign in, however, the signInSuccess is never called. I do not know what is going on here.

Custom flow

Using my own auth flow, I can authenticate without issues:

[bojeil-google]

Hey @levithomason can you check the browser console for errors? I tried it in our demo app https://fir-ui-demo-84a6c.firebaseapp.com but wasn't able to replicate it. It would be helpful if you can provide code snippets, environment information too to help replicate this.

[levithomason]

Forgot to mention, there are no errors. Let me see if I can whip up a minimal repro for you.

[levithomason]

The minimal reproduction works. I've tested this both with create-react-app and another JS compiler tool. I've narrowed the issue down to interop with react-redux-firebase. I'll investigate there a bit more and report back if I find anything.

[hasnat]

@levithomason I had the same issue when using [email protected] with [email protected]
updating firebase to 4.2.0 fixed the issue for me

[levithomason]

The infinite loading issue seems to have been resolved here as well. Running these versions:

firebase ^4.2.0
firebaseui ^2.3.0

react ^15.5.4
redux ^3.6.0
react-redux ^5.0.5
react-redux-firebase 2.0.0-beta.4

[carlosazaustre]

With firebase 4.5.0 and firebaseui 2.4.0 this issue is back :(

[bojeil-google]

Hey @carlosazaustre, I don't think we made any changes to affect this behavior.
Can you check for any errors in the browser console? and provide them.

[levithomason]

I've simply switched to a custom flow. Much easier to control and know what is going on.

[carlosazaustre]

@bojeil-google sorry, console shows anything, simply the browser shows a infinite loading bar, just like @mhuebert comments.

[bojeil-google]

Something must be hanging. Can you inspect the network console for some request that is hanging or erroring? Also does this happen consistently? or occasionally?
If you can host this somewhere, it will make it a lot easier to debug.

[Ghosts]

Not sure if this will help anyone else, but whenever I got the "infinite" loading issue I would clear Local Storage - specifically:
firebaseui::rememberedAccounts

I've written it into the "signout" method I have to also clear local storage / that key.

I'm using 2.4.0 of Firebase-ui.

[deckarep]

Also experiencing this ugly white box...it just straight up looks broken during this intermediate step.

[bojeil-google]

The display is optimized for a mobile device with no surrounding container. You can completely remove that box with css overrides:

.mdl-shadow--2dp {
  box-shadow: none
}

[berkayturanci]

For removing the ugly white box;

.firebaseui-id-page-callback { background: none !important; }

[lecstor]

when I finally realised my background wasn't quite white..
this worked for me to shrink the box down to the height of the spinner.. not sure that there's never content that might hide though.

.mdl-card .firebaseui-callback-indicator-container {
  height: 2px;
}

.mdl-card.firebaseui-container {
  min-height: 2px;
}

[deepfriedbrain]

I'm in the process of switching from Google Identity Toolkit and landed here because of the same issue. The default implementation definitely looks broken and that's what brought me here. Given that it hasn't been changed in over a year, I was wondering if there's any good reason to keep it this way.

[nicolasgarnier]

Let's close this issue since it was initially about styling of the "loading screen" after a successful sign-in when using the redirect flow.

https://github.com/firebase/firebaseui-web/issues/121#issuecomment-293913917 provides a way to customise this UI and add a text to your liking.

For other issues, especially if you are reporting a never ending loading screen please open a new issue.

[jxc876]

Wish this was documented on the main README. Was really confused why there was an empty box, the user experience is greatly improved with the CSS from above.

[Danebrouwer97]

@nicolasgarnier I'm really curious about this issue, how is a large empty white box with a loader attached to the top an appropriate solution?

Is there any documentation surrounding the Loading UI, or how to change it, or even that there is a large white box attached to the loader?

I realize that #121 (comment) solves the problem, but it seems curious that this is still an issue almost 4 years later.

Is the large white box an issue particular to stylistic packages?
For instance, I have Bootstrap 4 and Angular Material installed.