Skip to content

Handle loading experience of sidebar vs. page

Problem

issue (UX, loading): I noticed when loading the billing account settings page that the credit cards section loads as a full page first before the side nav loads and then it "jumps" into place. I recorded a video to show what I mean (both with throttling so you can get a better look and then without throttling).

Kapture_2023-09-20_at_14.25.42

A quick solution was implemented to make the experience a tad better reserving the space to the sidebar util it is loaded, but the problem is not quite handled:

Screen_Recording_2023-09-21_at_12.29.59

Proposal

I see a couple of approaches, but I believe the first one is the best, but multiple approaches could be applied:

  1. Migrate the payment methods page to be a Vue application, so it is loaded in the same fashion as the remainder of the page
  2. Display the sidebar header as a HAML component with a loading experience inside (this will get complex with the mobile styles)
  3. Either we could display three "loading lines" to show something that resembles the menu, or we could
  4. Implement the gl_loading_icon function and component to be used in HAML for the sidebar to display loading