mozilla/fxa

While subscriptions.firefox.com is loading, it shows a zero-height empty "card" while the loading throbber/spinner is still animating

dholbert opened this issue · 3 comments

Description

While https://subscriptions.firefox.com is loading, there's a phase (about a second long) where we show an empty/zero-content-height "card". The throbber is animating outside of the card, which feels slightly disconcerting / disembodied.

Other FxA sites don't seem to have this problem (for me at least) -- elsewhere, "cards" only appear at their full size (not zero-size) and only after the throbber has disappeared.

Steps to reproduce

  1. (optional) Throttle your network connection (F12, click "network", and use the throttling dropdown to choose one of the 3G options for example, and check "Disable Cache")
  2. Visit https://subscriptions.firefox.com
  3. Watch the page load process

Expected result

No phase with an empty/zero-content-height card and a throbber animating outside the card.
Throbber should animate while the page is loading, and then we should have a clean break to the landing page (whether the user's info or the login page).

Actual result

There's a phase where we show an empty/zero-height "card" which looks quite strange. Here's a screenshot -- the "card" is the thing at the top with a shadow and rounded corners:
image

Environment

Firefox Nightly 125.0a1 on Ubuntu 22.04.
I see the same issue in Chrome 122.0.6261.111 (Official Build) (64-bit) , so this isn't a browser-specific behavior.

┆Issue is synchronized with this Jira Task

I didn't even need to throttle my connection (and I'm on reasonably speedy cable) and I could see the temp state. 🤔

Yup, I see it with no throttling too (on 1GB fiber). Throttling just makes it last slightly longer.

closing since this is tracked in jira