diff --git a/client/src/javascript/app.tsx b/client/src/javascript/app.tsx index e1496e15..9012c3cf 100644 --- a/client/src/javascript/app.tsx +++ b/client/src/javascript/app.tsx @@ -1,6 +1,6 @@ import {Router} from 'react-router-dom'; import {FormattedMessage} from 'react-intl'; -import {Route} from 'react-router'; +import {Route, Switch} from 'react-router'; import React from 'react'; import ReactDOM from 'react-dom'; @@ -8,22 +8,28 @@ import AsyncIntlProvider from './i18n/languages'; import connectStores from './util/connectStores'; import AppWrapper from './components/AppWrapper'; import AuthActions from './actions/AuthActions'; -import FloodActions from './actions/FloodActions'; import history from './util/history'; import Languages from './constants/Languages'; import LoadingIndicator from './components/general/LoadingIndicator'; -import Login from './components/views/Login'; -import Register from './components/views/Register'; import SettingsStore from './stores/SettingsStore'; -import TorrentClientOverview from './components/views/TorrentClientOverview'; import UIStore from './stores/UIStore'; import '../sass/style.scss'; +const Login = React.lazy(() => import('./components/views/Login')); +const Register = React.lazy(() => import('./components/views/Register')); +const TorrentClientOverview = React.lazy(() => import('./components/views/TorrentClientOverview')); + interface FloodAppProps { locale?: keyof typeof Languages; } +const loadingOverlay = ( +
+ +
+); + const initialize = (): void => { UIStore.registerDependency([ { @@ -62,7 +68,6 @@ const initialize = (): void => { if (initialUser) { history.replace('register'); } else { - FloodActions.startActivityStream(); history.replace('overview'); } }, @@ -75,9 +80,11 @@ const initialize = (): void => { const appRoutes = ( - - - + + + + + ); @@ -89,12 +96,7 @@ class FloodApp extends React.Component { public render(): React.ReactNode { return ( - - - - }> + {appRoutes} ); diff --git a/client/src/javascript/components/views/TorrentClientOverview.tsx b/client/src/javascript/components/views/TorrentClientOverview.tsx index b410167e..2cd38a8a 100644 --- a/client/src/javascript/components/views/TorrentClientOverview.tsx +++ b/client/src/javascript/components/views/TorrentClientOverview.tsx @@ -1,15 +1,21 @@ import React from 'react'; import ActionBar from '../torrent-list/ActionBar'; -import Alerts from '../alerts/Alerts'; import ApplicationContent from '../layout/ApplicationContent'; import ApplicationPanel from '../layout/ApplicationPanel'; import ApplicationView from '../layout/ApplicationView'; -import Modals from '../modals/Modals'; +import FloodActions from '../../actions/FloodActions'; import Sidebar from '../sidebar/Sidebar'; import TorrentList from '../torrent-list/TorrentList'; +const Alerts = React.lazy(() => import('../alerts/Alerts')); +const Modals = React.lazy(() => import('../modals/Modals')); + export default class TorrentClientOverview extends React.Component { + async componentDidMount() { + FloodActions.startActivityStream(); + } + render() { return (