From 2fc02053044fd8334b92327107bbfa7e3840d8a4 Mon Sep 17 00:00:00 2001
From: Matt Dunn-Rankin <mattdunnrankin@khanacademy.org>
Date: Mon, 18 May 2020 00:20:48 -0700
Subject: [PATCH] code split the two pages

---
 src/app/App.js      | 6 ++++--
 src/app/HomePage.js | 5 +++++
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/app/App.js b/src/app/App.js
index 668b287..e72534a 100644
--- a/src/app/App.js
+++ b/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
diff --git a/src/app/HomePage.js b/src/app/HomePage.js
index 4106b20..90d284f 100644
--- a/src/app/HomePage.js
+++ b/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 (