Fix full screen loading indicator when routes are loaded lazy (or components uses React.Suspense)

[jerolimov]

Fixes:
https://issues.redhat.com/browse/ODC-5633

Analysis / Root cause:
When switching on the Pod detail page to the "Terminal" tab a lazy route / AsyncComponent was loaded and the user saw for a moment (depending on your internet speed) a strange full screen loading indicator.

This flicking happen because this loading uses react suspense and we have only one <React.Suspense /> at the application root level (app.jsx). This catch components works similar to ErrorBoundaries and could be used on different application levels.

Solution Description:
Wrap the page content and horizontal navigation tab content also with a <React.Suspense /> component.

This ensures that AsyncComponent loading on this levels shows a better loading indicator only in the content area. This would work also for other suspense usages.

I tested this by adding temporary suspense component to PodExecLoader (which us used in the terminal tab):

// Use global variables and delays only once (when rendering Delay the first time)!
let resolved: boolean = false;
let promise: Promise<null>;

const Delay = () => {
  if (!promise) {
    promise = new Promise((resolve) => {
      setTimeout(() => {
        resolved = true;
        resolve(null);
      }, 2000);
    });
  }
  if (!resolved) {
    throw promise;
  }
  return <div>Delay done!</div>;
};

// Add <Delay /> to PodExecLoader

Screen shots / Gifs for design review:

The original issue force with throttled internet connection:

Added the Delay component above to PodExecLoader without any other change:

When wrapping the page content (react router Switch) just in app-contents.tsx:

This helps for all pages without horizontal nav. But the navigation goes away and come back after the suspense promise is resolved.

When wrapping also the tab content (react router Switch again) in horizontal-nav.tsx:

This fixes the issue that the tab navigation goes way and come back after the suspense promise is resolved.

Unit test coverage report:
Unchanged

Test setup:

• Deploy and application
• Open the Pod detail page
• Reload your browser tab so that the Terminal component is not available!
• Switch to the Terminal tab

Better testable on a cluster or with throttled internet connection.

Browser conformance:

• Chrome
• Firefox
• Safari
• Edge

[jerolimov]

/assign @invincibleJai

[jerolimov]

/retest

[jerolimov]

/retest

[invincibleJai]

/lgtm

verified the changes works as expected

[openshift-ci]

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: invincibleJai, jerolimov

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Needs approval from an approver in each of these files:

• frontend/OWNERS [invincibleJai,jerolimov]

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment