Restructure code splitting — remove the quick flash white screen when switching pages

[neuodev]

Background

We implemented lazy loading (aka code splitting) back then when Yoroi was taking so long in the initial loading screen when opening the extension.

The Problem

When switching between tabs/pages we have a quick white flash screen.

Root Cause

It happens because when switching to a new tab that you never visited before the page is not actually there what will happen is while loading this page we will show this blank white screen. This screen is shown because we only have one Suspense with a fallback of null that wrapped the whole application (here)

<Suspense fallback={null}>
  {/* all pages */}
</Suspense>

So whenever page or subpage is still loading we fallback to the blank white screen.

The Solution

1. Instead of having one Suspense that wraps all pages we scope it into the level of subpages
2. Don't lazy load some pages like LoadingScreen
3. For full pages we only move the Suspense to the page content not the whole page

[neuodev]

Quick Note:

The big diff in the PR +1,204 −1,091 is from splitting both the VotingPage.js and StakingPage.js into two other pages.
For example the VotingPage.js -> VotingPage.js to wrap the content and add the navbar and the sidebar and VotingPageContent.js includes the actual content/logic of the page

And the same applies to the StakingPage.js!

So the diff comes from just moving the stuff around but on actual adding or deletion was done!

[vsubhuman]

/check