perf: lazy-load the ComposeBox (#1262)

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>

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>

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)