Feature/lazy load components (#590)

src/components/application-loader/application-loader.tsx

@@ -1,8 +1,7 @@
-import React, { Fragment, useCallback, useEffect, useState } from 'react'
+import React, { Suspense, useCallback, useEffect, useState } from 'react'
 import { useLocation } from 'react-router'
 import './application-loader.scss'
 import { createSetUpTaskList, InitTask } from './initializers'
-
 import { LoadingScreen } from './loading-screen'
 
 export const ApplicationLoader: React.FC = ({ children }) => {
@@ -33,9 +32,13 @@ export const ApplicationLoader: React.FC = ({ children }) => {
     }
   }, [initTasks, runTask])
 
-  return (
-    doneTasks < initTasks.length || initTasks.length === 0
-      ? <LoadingScreen failedTitle={failedTitle}/>
-      : <Fragment>{children}</Fragment>
-  )
+  const tasksAreRunning = doneTasks < initTasks.length || initTasks.length === 0
+
+  if (tasksAreRunning) {
+    return <LoadingScreen failedTitle={failedTitle}/>
+  } else {
+    return <Suspense fallback={(<LoadingScreen/>)}>
+      {children}
+    </Suspense>
+  }
 }

src/components/application-loader/loading-screen.tsx

@@ -4,7 +4,7 @@ import { ForkAwesomeIcon } from '../common/fork-awesome/fork-awesome-icon'
 import { ShowIf } from '../common/show-if/show-if'
 
 export interface LoadingScreenProps {
-  failedTitle: string
+  failedTitle?: string
 }
 
 export const LoadingScreen: React.FC<LoadingScreenProps> = ({ failedTitle }) => {
@@ -14,7 +14,7 @@ export const LoadingScreen: React.FC<LoadingScreenProps> = ({ failedTitle }) =>
         <ForkAwesomeIcon icon="file-text" size="5x"
           className={failedTitle ? 'animation-shake' : 'animation-pulse'}/>
       </div>
-      <ShowIf condition={ failedTitle !== ''}>
+      <ShowIf condition={ !!failedTitle}>
         <Alert variant={'danger'}>
           The task '{failedTitle}' failed.<br/>
           For further information look into the browser console.