Cache the homepage category data in Local Storage for faster loading
The homepage can benefit from some perceived faster load-times, as it currently consists of the following to be completed consecutively:
- waiting for the HTML to be downloaded
- waiting for the JavaScript script to be downloaded
- waiting for it to execute
- waiting for the HomePage React component to be loaded by
react-router-dom
- waiting for the three parallel requests to category data, meta lists, and favourites
This MR attempts to reduce the last latency by caching the results of the requests in browser Local Storage, making the data load nearly instantly once we hit the React component rendering stage.
The code will always call the requests anyway though to fetch the latest data and update the cache, so users may see a few seconds of stale data. However this isn't a large problem in my opinion: the only jarring visual shift would be due to the rare addition or deletion of courses, and otherwise the data update will only change numbers/progress bars on the page, which have minimal layout shift.