Lazily load the game react components

app/src/games/chess/client/index.js

@@ -1,4 +1,12 @@
-import Host from "./Host";
-import Guest from "./Guest";
+import { Suspense, lazy } from "react";
+
+const withSuspense = (Component) => (props) => (
+  <Suspense fallback="Loading...">
+    <Component {...props}/>
+  </Suspense>
+)
+
+const Host = withSuspense(lazy(() => import("./Host")))
+const Guest = withSuspense(lazy(() => import("./Guest")))
 
 export { Host, Guest }

app/src/games/hot-potato/client/index.js

@@ -1,4 +1,12 @@
-import Host from "./Host";
-import Guest from "./Guest";
+import { Suspense, lazy } from "react";
+
+const withSuspense = (Component) => (props) => (
+  <Suspense fallback="Loading...">
+    <Component {...props}/>
+  </Suspense>
+)
+
+const Host = withSuspense(lazy(() => import("./Host")))
+const Guest = withSuspense(lazy(() => import("./Guest")))
 
 export { Host, Guest }

app/src/games/tic-tac-toe/client/index.js

@@ -1,3 +1,12 @@
-import Guest from "./Guest";
-import Host from "./Host";
-export { Guest, Host };
+import { Suspense, lazy } from "react";
+
+const withSuspense = (Component) => (props) => (
+  <Suspense fallback="Loading...">
+    <Component {...props}/>
+  </Suspense>
+)
+
+const Host = withSuspense(lazy(() => import("./Host")))
+const Guest = withSuspense(lazy(() => import("./Guest")))
+
+export { Host, Guest }

app/src/games/whist/client/index.js

@@ -1,4 +1,12 @@
-import Host from "./Host";
-import Guest from "./Guest";
+import { Suspense, lazy } from "react";
+
+const withSuspense = (Component) => (props) => (
+  <Suspense fallback="Loading...">
+    <Component {...props}/>
+  </Suspense>
+)
+
+const Host = withSuspense(lazy(() => import("./Host")))
+const Guest = withSuspense(lazy(() => import("./Guest")))
 
 export { Host, Guest }