2

I have a filter sidebar with 5+ filters. Each filter allows to select multiple options. For now it is implemented using multi-select(not native one, you need to select items one by one).

The issue is I'm loading large state request on filter changes, so I want to avoid sending it when user select 10 elements of one filter. I want to send one request with 10 already selected when they finished.

First possible solution I've thought of was to send request on Blur event, but it might be bad idead from UX perspective, because user will select something, but nothing will happen + filter changes main page state, so it is not like a sequence of selects, you can just use one filter once and never tab or focus to next one.

How would you handle issue like this one?

how my multi-select looks, just to make it clearer:

Multi select I'm using

Improve this question
2
  • Does the API call time increase incrementally with each request? (so, selecting 4 items takes 4x as long to return results than if you selected just 1), or is it a negligible amount? And I assume you actually have to hit the API for these, and it's not just filtering down an already generated list based on the selected criteria (which could presumably just be done through the front-end instead)? Commented Sep 5, 2024 at 11:37
  • No, API call time doesn't change a lot depending on filters amount. Of course, more filters mean more data, but the main issue is that it triggers the whole page state reload which is big. Yes, you are right, filters triggers data filtering on backend and returning new state to frontend Commented Sep 5, 2024 at 11:52

1 Answer 1

Reset to default
0

As I understand it you have two possible solutions:

  1. You need to cache a lot of data in the client in order to have a "real time" applying filter. Or at least cache something like an index to show intermediate results (digest, thumbnail) before loading details (full page/image from backend).

  2. You need to have a button "Apply" or similar which triggers the sending of the request to the backend and returns the fresh filtered data.

Deciding which approach to go is heavily dependent on the circumstance factors like backend load, data amount, bandwidth, processing power, memory consumption and the like.

Improve this answer

Your Answer

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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.