[General - Performance] Improve Frontend Performance

[flavioislima]

Problem description

Currently, Heroic loads the whole list of games at once on startup so this is pretty bad for performance since the bigger the library, the slower and heavy it will be.

Feature description

Heroic should handle the Library logic on the backend. So the merging of different libraries, filters, etc. should be done there.
The list should come to the frontend split by pages.
The frontend should have a method to get the next pages.
25 seems like a good number of items to start, but we could test with bigger or smaller numbers as well.
The search method should be handle on backend as well, finding the list of elements and sending it back to frontend.

Alternatives

No response

Additional information

I think this is critical since even for average libraries like 200 to 300 games, on devices like Steam Deck Heroic is using 1GB of Ram and the interface is not really responsive.

[BrettCleary]

What kind of UX/UI do we want? We could

1. expose page buttons at the bottom
2. expose previous and next page arrows somewhere in the library screen
3. auto load the next page on scroll. This would keep the previous pages in frontend memory but only add another page if the user scrolls far enough. There would be a spinner at the bottom while the next page was being fetched

[SgtPooki]

Is there a tracking issue for the backend work?

[flavioislima]

Is there a tracking issue for the backend work?

No. At the same time, reading the whole idea again, this might be improved by using a state management library on frontend.

Sending the logic to backend could improve parts of it but not everything since the major issue with the library now is the amount of re-renders.

[misaeldossantos]

Problem description

Currently, Heroic loads the whole list of games at once on startup so this is pretty bad for performance since the bigger the library, the slower and heavy it will be.

Feature description

Heroic should handle the Library logic on the backend. So the merging of different libraries, filters, etc. should be done there. The list should come to the frontend split by pages. The frontend should have a method to get the next pages. 25 seems like a good number of items to start, but we could test with bigger or smaller numbers as well. The search method should be handle on backend as well, finding the list of elements and sending it back to frontend.

Alternatives

No response

Additional information

I think this is critical since even for average libraries like 200 to 300 games, on devices like Steam Deck Heroic is using 1GB of Ram and the interface is not really responsive.

I don't know if that's what you were intending to do, but I created a virtual paginated list with infinite scroll: #2075.

Ideally, this would be done on the backend side, but I didn't go very far in that part of the code to see if it's possible.

I hope to help

[flavioislima]

@misaeldossantos yes, that one did a pretty good job.
We still have a lot to improve but I noticed that the rendering time for the GameList has improved a lot with the infinite scroll hook and that was my idea at first, so thanks for that.