0

Conceptually, I have 2 tabs that act as filters for an infinitely scrollable list. There's a local tab and a global tab. The local tab can be empty pretty often. I'd like to fall back to the global tab when the local tab is empty. Is there a good pattern for this?

I could load both tabs initially, then switch to the global tab if the local tab is empty. However, it would show the local tab loading state. In addition, since there are only 2 lists, I'm not sure if tabs is the right pattern.

I'm currently experimenting with showing the 2 "tabs" as 2 lists on top of each other. E.g. I'd show up to 10 local items on top and up to 10 global items on the bottom, each with a "see all" button. If there aren't any local items, then the empty list doesn't take up much space, so the global list on the bottom are shown. However, it's not ideal to require an additional button click to view more than 10 items.

E.g.:

Local

  • local item
  • local item
  • local item

[View more local items]

Global

  • global item
  • global item
  • global item

[View more global items]

Improve this question
2
  • Can you post a wireframe of your current work?
    – Gene Lee
    Jun 9 at 18:45
  • I don't have wireframes, not a designer. I added an example of what it roughly looks like
    – Leo Jiang
    Jun 9 at 21:18

1 Answer 1

Reset to default
1

I think the lists split up into rows would work. I'm guessing your tabs have names yes, so then the horizontal lists can also reuse those names. Here's an example using google playstores:

google play store

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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