2

I'm developing a Single Page Application (SPA) design framework and need some thoughts on the navigation/loading approach. I couldn't find meaningful answers in this regard on the internet.

Question

In the context of parent to child navigation, is there any preference for showing a loading state on the control responsible for the navigation and only transition to the next page after data is loaded, vs the probably more common approach of navigating right away and display a loading state on the new page?

Example

A vinyl online store. There is a page with a list of available products. User clicks on a list item.

Scenario A:

  • A spinner will be shown next to the clicked item
  • User interaction with the list will be disabled
  • Once the product's full data is finished loading from the server the page navigates away and instantly displays the product details

Scenario B:

  • User is taken right away to the next page
  • This new page will be in a brief loading state
  • Once the product full data is finished loading from the server the loading state is replaced by the product details

Let me know your thoughts. Thanks!

1
  • Scenario B. It follows more closely what a user would expect on any normal website where clicking a link immediately directs the user to the new page and subsequently loads the data. Scenario A will likely make your website feel sluggish.
    – Martyn
    Dec 16 '20 at 23:46
-1

It is my opinion that spinners should be outlawed.

They have a negative connotation. They're the new annoying hourglass. Anyone using them should be shot.

They make time perception slow down, giving the impression that the app is slower than it actually is.

Scenario B is better than Scenario A. However:

Say there are 20 items on the products list. Why not load the basics of name, description, and details with the list items? This would cost a total of about 80kb for 1000 extra characters per item. Say it will take 2 seconds to load the data. Then, a user clicks on a list item...

Scenario C:

  • The get request is sent, and immediately the detail view is triggered.
  • Rather than go instantly to the detail view, a fast animation swaps the view in and out in a 200ms or so. It feels fast, but that's 200ms less perceived wait time while the content is still loading.
  • The basic text data of product name, details, price, and UI components appear in the appropriate manner from the data already downloaded from the list data, appearing in zippy 100ms animations chained together in order of importance. Four or five components pop in, and another 500ms go by.
  • The image gallery knows how many images it has from the data provided, so it pre-populates the gallery with blank placeholders. This happens in quick succession, over 400ms.
  • The gallery images appear immediately after, and they fade in so as to not seem as though they loaded, but rather were part of the experience. These images are only 200x200, just large enough to use for the placeholders, but not for the expanded view, which is a full 1000x700. The placeholder images fade in over 400 ms.
  • The primary product image still has another 500ms to go. But the placeholder is a low res version of it, so let's use that with a blur effect while we wait. It fades in over 300 ms.
  • Now we wait another 300 ms for the main image to load, and swap the blurred low-res placeholder with the medium-res product image, animating the blur to make it look like it came into focus.
  • The full-res images fire a GET request now, anticipating the user to click on a gallery item to see a full-res version.
  • Similar products, recommended products, and customer reviews load in the meantime.

It all took place over 2000 ms, but there was only an actual wait time of 300 ms, which is almost imperceptible. So we effectively took a 2-second wait and made it seem like it happened instantly.

3
  • Nice! A few things: - When I say spinner I mean any loading indicator (not sure if you mean that too). - So you favor the regular use case of loading the more detailed (and possibly heavy) info after navigation happens (ie. during the transition)? Seems kind of challenging from a software development standpoint. But will definitely be cool. Dec 16 '20 at 11:54
  • CSS 3 animations make it very easy to do these things with one or two lines of code. This was an extreme example, but any one of those steps is an improvement. The answer was to illustrate how you can make a full 2 second load time seem instantaneous. Dec 16 '20 at 11:59
  • 1
    Sure thing. More on the JS side of things. But I got an idea of how to structure it. I'm gonna wait to see if more people show up, then I can accept your answer if that's the case. I can't upvote due to low rep. Thanks! Dec 16 '20 at 12:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.