code split the two pages

src/app/App.js

@@ -2,10 +2,12 @@ import React from "react";
 import { ApolloProvider } from "@apollo/react-hooks";
 import { CSSReset, ThemeProvider, theme } from "@chakra-ui/core";
 import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
+import loadable from "@loadable/component";
 
 import apolloClient from "./apolloClient";
-import HomePage from "./HomePage";
+
-import WardrobePage from "./WardrobePage";
+const WardrobePage = loadable(() => import("./WardrobePage"));
+const HomePage = loadable(() => import("./HomePage"));
 
 /**
  * App is the entry point of our application. There's not a ton of exciting

src/app/HomePage.js

@@ -141,7 +141,12 @@ function SubmitPetForm() {
 
   const onSubmit = (e) => {
     e.preventDefault();
+
     loadPet({ variables: { petName } });
+
+    // Start preloading the WardrobePage, too!
+    // eslint-disable-next-line no-unused-expressions
+    import("./WardrobePage");
   };
 
   return (