Code splitting and lazy loading for faster load times.

app/src/components/App.js

@@ -1,8 +1,11 @@
-import React from 'react';
+import React, { useEffect, Suspense } from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
-import Room from './Room';
 import JoinDialog from './JoinDialog';
+import LoadingView from './LoadingView';
+import { ReactLazyPreload } from './ReactLazyPreload';
+
+const Room = ReactLazyPreload(() => import(/* webpackChunkName: "room" */ './Room'));
 
 const App = (props) =>
 {
@@ -10,6 +13,13 @@ const App = (props) =>
 		room
 	} = props;
 
+	useEffect(() =>
+	{
+		Room.preload();
+
+		return;
+	}, []);
+
 	if (!room.joined)
 	{
 		return (
@@ -19,7 +29,9 @@ const App = (props) =>
 	else
 	{
 		return (
-			<Room />
+			<Suspense fallback={<LoadingView />}>
+				<Room />
+			</Suspense>
 		);
 	}
 };

app/src/components/ReactLazyPreload.js

@@ -0,0 +1,10 @@
+import React from 'react';
+
+export const ReactLazyPreload = (importStatement) =>
+{
+	const Component = React.lazy(importStatement);
+
+	Component.preload = importStatement;
+
+	return Component;
+};