Virtualise the Post List

[joealden]

https://reactjs.org/docs/optimizing-performance.html#virtualize-long-lists

• First, test the non-virtualised list with 100+ of items
• With this version, test the performance impact in the following ways:
  • Visually
  • React Profiler (as triggering list re-renders, like when sorting the list [depends on #2])
  • Chrome and Firefox performance tools (Like CPU and RAM usage)
• With this data collected and happy that performance optimisations are required, implement virtualisation of the list using react-window (or react-virtualized if the slimness of react-window doesn't cut the use case [having the list item height change when the viewport width changes, as well as the list adjusting height when the viewport height changes])
• Once implemented, analyse the same metrics as talked about above with the non-virtualised list as well as the following:
  • Check that the images still lazy loading correctly.
  • Check for any visible rendering issues when scrolling the list.

[joealden]

This issue is blocked because it is dependent on @JoeSuttton adding more posts to Contentful. This is so that we can actually see if this is a performance problem.

[joealden]

If this becomes an issue, I will implement this feature. For now, I will leave this issue open.