Lots of flickering UI elements during initial login after registration

[justjanne]

In Short

We’ve got a lot of different UI elements in differing layout, themes, and styles all showing within of the first second of a users’ initial login.

Discussion

I’m splitting this issue out from a comment thread that about this on the Use Case Selection PR:

niquewoodhouse commented Jul 8, 2022

Finding the current transition from email verify link to this screen a bit distracting/alarming:

• The ui jumps around, we get multiple references to keys that disappear almost immediately, we go from light to dark theme ui. Is there anything we can easily do about these things?

ele-web-self-segment-check01.mov

[…]

justjanne commented Jul 8, 2022

[…]

I don’t think there’s anything we could do about the UI jumping around in this part of the code, we’d probably have to modify the other parts of the UI for this. The only thing I could try to avoid would be the key UI.

justjanne commented Jul 8, 2022

I’ve extracted all the relevant parts from that video, to show which parts show in which themes:

• Previous page, "verify your email" screen, light mode on mountain background
  
• Browser waiting for page to load, dark background
  
• Browser has loaded an empty page, white background
  
• Default content for auth route, login screen in white on white background (neither dark mode css nor mountain background have loaded yet)
  
• Default content for auth route, login screen in dark mode on black background (mountain background hasn’t loaded yet)
  
• Setting up keys screen, dark mode on black background (mountain background hasn’t loaded yet)
  
• Setting up keys screen with setting up keys modal, dark mode on mountain background
  
• Setting up keys screen, dark mode on mountain background
  
• New use case selection screen (no content showing), dark mode on dark gradient background
  
• New use case selection screen (only title showing), dark mode on dark gradient background
  
• New use case selection screen (all content showing), dark mode on dark gradient background