Navigating "Back" into a page with lots of tiles is slow

[infinite-persistence]

Couldn't find the Desktop version of the ticket, so opening a new one. It's been this way since 2020, so we can isolate this from the recent slowdown that we are seeing (although they all add up).

Issue

If you navigate back to a page with lots of claim tiles, it takes several seconds to load (proportional to number of tiles).

Reproduce:

1. Enter any category page
2. Scroll to 10+ or more pages
3. Click on a tile
4. Back -- the more tiles in the previous page, the more longer it takes. Also more apparent in slower machines or mobile.

Causes

• [ ] ClaimPreview and ClaimPreviewTile is just too complex with too many children. Ligthouse complains about DOM size being too big.
  • Having many smaller components help in reusability, but most of them aren't being reused anyway. One solution is to move the logic into util functions instead to lower the number of children for these 2 components.
• [x] Each tile will look up 4 blocklists on every render
  • _{Alleviated through better memoization of the lookup + lighter URI parsing}
• [ ] Bad selectors
  • Even when these components aren't rendering, their select is calling a bunch of selectors that are still not memoized correctly. Also, each child of this component uses the same selectors, so the calculations are repeated many times due to the failed memo.

Explored solutions

• Windowed scrolling (loading only a handful of tiles at a time)
  • Issues found at that time:
    • no robust 3rd party solution -- each have their quirks. Might as well just roll our own. Looked at react-virtualized, react-window and a few smaller ones.
    • Our tiles have uneven height (e.g. different height for reposts). This is a general crux for Windowed Scrolling.
    • Our homepage consists of different sections. Hard to virtualize and maintain multiple sections in a window.

[infinite-persistence]

Alternative ideas:

• Just show an auto-incrementing horizontal loading bar at the top when Back is clicked, and dismiss when page is rendered.
  • My previous attempts weren't successful ... the bar itself would not paint until the page is already loaded.
  • Haven't tried https://stackoverflow.com/a/40988672/977819, but sounds logical.