1

We have a vertical scroller with the first card being able to scroll horizontally (imagine Netflix/Amazon).

The problem we are facing is that the vertical cards (Cards 2 - N) load way faster than the horizontal cards (cards 1 - 1.N) and potentially won't even appear.

We currently have two spinners (doesn't look/feel great at all). One for the vertical cards (spinner stays at the bottom of the last loaded card and then is removed once they are done) and a spinner for the horizontal cards.

The problem is, is that there is a chance that card 1 might not appear at all (depends on data), so it would be weird to show the card upfront and then remove it if it shouldn't exist.

Any suggestions to make this a better user experience?

Note: The spinners are not in the cards, but more part of the background

Initial view

1

Some vertical cards load

2

Final view

1

1

Have only one spinner that is displayed until all content is loaded.

The point of the spinner is simply to show the user that content is loading. A single spinner will accomplish this fine.

Put the spinner somewhere where it won't be associated with specifically either the horizontal or vertical cards--perhaps next to the title inside the floating header.

  • What about when they scroll down (while the spinner is at the top, out of view) and don't get to see the content at the bottom that is yet to load? And with the spinner at the bottom, would the top card just appear (with animation of course)? – Johan Sep 26 '16 at 14:45
  • @Johan added a suggestion. – user31143 Sep 26 '16 at 15:05

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.