Add a "loading" graphic on initial homepage load

[seanmturley]

Description

The homepage is currently quite slow to load. To some extent this may be alleviated by reducing the number of posts requested (see #160). However, there will inevitably be some delay before the posts are rendered, so some feedback should be provided to the user in the form of a loading overlay (as current exists e.g. when changing between subreddits).

[seanmturley]

Evidently the navigation.state can't be used to provide a loading display upon initial page load.

The following article has a description of the issue and potentially a solution: How to show a splash screen on initial page load and reload in React Router

[seanmturley]

Made changes to App, but need to dig in further to exactly how it's supposed to interact with router and RouterProvider.

The current state is broken.

[seanmturley]

As explained in the article, the router has been moved from App.js to index.js. This seems to be working as expected. However, there are issues remaining:

• [x] The useEffect in App.js attempts to access router.state.navigation.state, but router.state is undefined (also a console.log left here in last commit).
• [x] The useEffect in App.js is missing the router dependency.

The first issue above is preventing the app from loading at all.

[seanmturley]

The reason router.state was undefined was because router is defined as a function that returns the router object, which is part of the lightTheme implementation. This means the router function needs to be called to access the object i.e. router().state.navigation.state. A silly little issue, that took quite a while to see.

Additionally, router was added to the App useEffect dependency array with no issues.

Now another problem is revealed:

• [ ] router().state.navigation.state is gets stuck on "loading". ~This appears to be because the react_refresh websocket call is stalled (see Network tab).~

Edit: Additional notes on navigation.state:

• Testing on GitHub pages encounters the same issue - router().state.navigation.state remains stuck on "loading". However, the stalled react_refresh websocket call is not present in the Network tab, indicating that may not be the issue.
• Removing the conditional around rendering RouterProvider allows the page to load as normal. This can be done either by removing the ternary conditional or setting showSplashScreen to false. Interestingly, the navigation.state still remains on "loading" indefinitely - this indicates it's the navigation.state itself that is the issue. It remains on loading even after navigating to other pages within the app.

[seanmturley]

Reverted the previous 3 commits in favour of attempting a new approach following this post on Stack Overflow. This looks simpler - hopefully it works.

[seanmturley]

This time a loading screen was successfully added based on the approach in the previously mentioned Stack Overflow post. This approach is simpler, and actually works.

At the moment an arbitrary "Loading..." message is displayed. Something more visually appealing should be added that matches the app theming, and ideally incorporating some animation. It's possible that this could be the same as the in-app navigation loading overlay (slated for improvement in #170), though it's not clear if this is entirely feasible as the later wants to work as part of a semi-transparent overlay. Still, it's worth keeping in mind that the bulk of the graphic could be shared, perhaps just wrapped in different styling rules to tweak colours.

[seanmturley]

The CSS and HTML placement of LoadingOverlay has been altered slightly to allow the possibility of LoadingOverlay and LoadingSplash being reduced to a single component that handles all loading animations.

Need to design and implement a simple loading animation that incorporates the leaf logo in some way.

[seanmturley]

An animated spinner with the app's leaf logo was added (essentially completing #170).

The LoadingSplash and LoadingOverlay components have been reduced to a single component (also called LoadingOverlay).

The "flicker" that occurs between the initial loading splash and the app loading will be investigated in #175.

Marking this main task as complete.