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.
