From 58a8772edc8f587837fc5c13ce0770bc7fd033de Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Sat, 1 Jun 2019 17:01:50 -0700
Subject: [PATCH] perf: lazy-load the ComposeBox (#1262)

---
 src/routes/_components/TimelineHomePage.html     |  8 ++++----
 .../_components/compose/LazyComposeBox.html      | 16 ++++++++++++++++
 src/routes/_utils/asyncModules.js                |  4 ++++
 3 files changed, 24 insertions(+), 4 deletions(-)
 create mode 100644 src/routes/_components/compose/LazyComposeBox.html

diff --git a/src/routes/_components/TimelineHomePage.html b/src/routes/_components/TimelineHomePage.html
index d7369adf..b8efb221 100644
--- a/src/routes/_components/TimelineHomePage.html
+++ b/src/routes/_components/TimelineHomePage.html
@@ -7,7 +7,7 @@
   {#if hidePage}
     <LoadingPage />
   {/if}
-  <ComposeBox realm="home" hidden={hidePage}/>
+  <LazyComposeBox realm="home" hidden={hidePage}/>
   <div class="timeline-home-anchor-container">
     {#if !hidePage && hideTimeline}
       <LoadingPage />
@@ -29,7 +29,7 @@
   import LazyTimeline from './timeline/LazyTimeline.html'
   import { store } from '../_store/store.js'
   import LoadingPage from './LoadingPage.html'
-  import ComposeBox from './compose/ComposeBox.html'
+  import LazyComposeBox from './compose/LazyComposeBox.html'
 
   export default {
     oncreate () {
@@ -44,9 +44,9 @@
     },
     store: () => store,
     components: {
+      LazyComposeBox,
       LazyTimeline,
-      LoadingPage,
-      ComposeBox
+      LoadingPage
     }
   }
 </script>
diff --git a/src/routes/_components/compose/LazyComposeBox.html b/src/routes/_components/compose/LazyComposeBox.html
new file mode 100644
index 00000000..1238c831
--- /dev/null
+++ b/src/routes/_components/compose/LazyComposeBox.html
@@ -0,0 +1,16 @@
+{#await importComposeBox}
+<!-- awaiting promise -->
+{:then ComposeBox}
+<svelte:component this={ComposeBox} {realm} {hidden} />
+{:catch error}
+<div>Component failed to load. Try refreshing! {error}</div>
+{/await}
+<script>
+  import { importComposeBox } from '../../_utils/asyncModules'
+
+  export default {
+    data: () => ({
+      importComposeBox: importComposeBox()
+    })
+  }
+</script>
diff --git a/src/routes/_utils/asyncModules.js b/src/routes/_utils/asyncModules.js
index 9950e1a8..35e1df8b 100644
--- a/src/routes/_utils/asyncModules.js
+++ b/src/routes/_utils/asyncModules.js
@@ -43,3 +43,7 @@ export const importToast = () => import(
 export const importSnackbar = () => import(
   /* webpackChunkName: 'Snackbar.html' */ '../_components/snackbar/Snackbar.html'
   ).then(getDefault)
+
+export const importComposeBox = () => import(
+  /* webpackChunkName: 'ComposeBox.html' */ '../_components/compose/ComposeBox.html'
+  ).then(getDefault)