Performance optimizations ⏱

[visortelle]

This issue includes only improvements that can be done without making changes in the code of the data source services.

[visortelle]

• [x] Avoid page content re-renders when the search input's query changes.

The problem is noticeable when there are a lot of DOM elements to render like here.

I'm typing with normal speed here:

https://user-images.githubusercontent.com/9302460/150680726-82bfb37e-b91e-4518-ae40-d73bb6c74a31.mov

---

Tried react-virtualized and others here. It's not trivial to integrate without code over-complication if we want to preserve the global page scroll bar.

Fixed by adding performance degradation disclaimer in https://github.com/visortelle/hackage-ui/commit/f24d9895d1c4e4ae6d0766cee488ba9e35f565e8

It should be enough for now.

[visortelle]

• [x] Parallelize server-side data fetching from different data sources.

Now it is synchronous in the scope of a single request.

Fixed here: https://github.com/visortelle/hackage-ui/commit/c86f839c35038eac4572878fa7f74e16521597aa

[visortelle]

• 🚫 Improve performance on lists with ~300 and more elements.

While Hackage doesn't have millions of packages like NPM does, probably virtualized rendering would be enough.

https://github.com/bvaughn/react-window

Otherwise, we'd need pagination or infinite scroll.

---

Won't fix it for now. See https://github.com/visortelle/hackage-ui/issues/13#issuecomment-1019485957

[visortelle]

• [ ] Avoid over-fetching. Not it's probably the main cause of unresponsive UI.

Probably it has the sense not directly rely on existing and implement some kind of thin APIs aggregation layer oriented for concrete UI needs.

[visortelle]

• [x] Show loading indication for the user when we fetch some data on server-side with blocking NextJS request.

Now sometimes UI just get's stuck for a second or two without any indication of a continuous process.

Fixed here: https://github.com/visortelle/hackage-ui/commit/99db7912ad1ff7baed1d31cf985ae2f1f0874100