Implement lazy components in login page

[josemigallas]

What this PR does / why we need it:

Some pages may contain a couple of components but not show all of them. For instance the login page has a different component for every sub-page: password change, request new password, sign in and sign up. Each of these components have their own pack file, plus the one for login.

Lazy components are declared in the code but not imported (loaded) until they're actually needed. Therefore, with this approach we can combine all 5 packs into one and the browser will only request the proper component according to the sub-page the user is in.

HOWEVER, this may not need so important performance-wise, since the component in used will always be rendered. Lazy components are the most useful when it can't be ensured a component will be used or not. In the login page this is known.

Which issue(s) this PR fixes

Generic-performance-issue-N

Verification steps

Check the following pages:

• Login
• Sign up (need invitation token)
• Request password
• Change password (need link after requesting new password)

[akostadinov]

I'm not much into this. I just noticed some online recommendation for node 14 settings:

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "lib": ["ES2020"],
    "module": "ES2020",
    "moduleResolution": "node",
    "target": "ES2020"
  }
}

But then I read docs https://www.typescriptlang.org/docs/handbook/esm-node.html

So I guess that might be backward incompatible to change module type. Just throwing it out here. I guess you have considered these already.

[github-actions]

This PR is stale because it has not received activity for more than 30 days. Remove stale label or comment or this will be closed in 15 days.

[github-actions]

This PR is stale because it has not received activity for more than 30 days. Remove stale label or comment or this will be closed in 15 days.