React query and image gallery ui
What would be the recommended action for RQ to update an image gallery UI (think instagram search page, a grid system basically). Let's say the client searches for the latest images and then display the most recent 10. And let's say every second we have 2 new images. Whenever RQ fetches new data, the whole grid gets rerendered. While the data are kept in sync, it doesn't feel like a great user experience. What are some alternatives here?
2 Replies
given the constraints that:
1. you're rendering the most recent images first
2. you're rendering new images as they load
there's no way to avoid the janky rerender. Going to have to either not render the most recent images first or stop rerendering them as they load.
IDK of a UI on any web app that automatically renders the most recent results at the top of a list in real time without user input.
One thing you can do is what Twitter does. When more recent results are available, twitter adds a "Load X Newer Tweets" button to the top of the list, so it only renders that new stuff when the user actually presses that. This avoids rerendering while they're scrolling them while giving them an option to the see newest stuff
Unfortunately my team doesn't like the tweeter idea 😢