make timeline components async (#204)

routes/_components/timeline/Timeline.html

@@ -4,8 +4,10 @@
      on:focusWithCapture="saveFocus(event)"
      on:blurWithCapture="clearFocus(event)"
 >
-  {{#if virtual}}
-    <VirtualList component="{{VirtualListComponent}}"
+  {{#await componentsPromise}}
+  {{then result}}
+    <:Component {result.listComponent}
+                component="{{result.listItemComponent}}"
                 realm="{{$currentInstance + '/' + timeline}}"
                 containerQuery=".container"
                 :makeProps
@@ -15,35 +17,28 @@
                 showHeader="{{$showHeader}}"
                 headerComponent="{{MoreHeaderVirtualWrapper}}"
                 :headerProps
+                :scrollToItem
                 on:scrollToBottom="onScrollToBottom()"
                 on:scrollToTop="onScrollToTop()"
                 on:scrollTopChanged="onScrollTopChanged(event)"
                 on:initialized="initialize()"
                 on:noNeedToScroll="onNoNeedToScroll()"
     />
-  {{else}}
-    <!-- if this is a status thread, it's easier to just render the
-         whole thing rather than use a virtual list -->
-    <PseudoVirtualList
-               component="{{VirtualListComponent}}"
-               realm="{{$currentInstance + '/' + timeline}}"
-               containerQuery=".container"
-               :makeProps
-               items="{{$timelineItemIds}}"
-               scrollToItem="{{scrollToItem}}"
-               on:initialized="initialize()"
-    />
-  {{/if}}
+  {{catch error}}
+    <div>Error: component failed to load! Try reloading. {{error}}</div>
+  {{/await}}
 </div>
 <script>
   import { store } from '../../_store/store'
-  import StatusVirtualListItem from './StatusVirtualListItem.html'
-  import NotificationVirtualListItem from './NotificationVirtualListItem.html'
   import Status from '../status/Status.html'
   import LoadingFooter from './LoadingFooter.html'
   import MoreHeaderVirtualWrapper from './MoreHeaderVirtualWrapper.html'
-  import VirtualList from '../virtualList/VirtualList.html'
-  import PseudoVirtualList from '../pseudoVirtualList/PseudoVirtualList.html'
+  import {
+    importVirtualList,
+    importPseudoVirtualList,
+    importStatusVirtualListItem,
+    importNotificationVirtualListItem
+  } from '../../_utils/asyncModules'
   import { timelines } from '../../_static/timelines'
   import {
     getStatus as getStatusFromDatabase,
@@ -81,8 +76,22 @@
       scrollTop: 0
     }),
     computed: {
-      VirtualListComponent: (timelineType) => {
-        return timelineType === 'notifications' ? NotificationVirtualListItem : StatusVirtualListItem
+      // For threads, it's simpler to just render all items as a pseudo-virtual list
+      // due to need to scroll to the right item and thus calculate all item heights up-front.
+      // Here we lazy-load both the virtual list component itself as well as the component
+      // it renders.
+      componentsPromise: (timelineType) => {
+        return Promise.all([
+          timelineType === 'status'
+            ? importPseudoVirtualList()
+            : importVirtualList(),
+          timelineType === 'notifications'
+            ? importNotificationVirtualListItem()
+            : importStatusVirtualListItem()
+        ]).then(results => ({
+          listComponent: results[0],
+          listItemComponent: results[1]
+        }))
       },
       makeProps: ($currentInstance, timelineType, timelineValue) => async (itemId) => {
         let res = {
@@ -120,9 +129,6 @@
       timelineValue: (timeline) => {
         return timeline.split('/').slice(-1)[0]
       },
-      // for threads, it's simpler to just render all items as a pseudo-virtual list
-      // due to need to scroll to the right item and thus calculate all item heights up-front
-      virtual: (timelineType) => timelineType !== 'status',
       // Scroll to the first item if this is a "status in own thread" timeline.
       // Don't scroll to the first item because it obscures the "back" button.
       scrollToItem: (timelineType, timelineValue, $firstTimelineItemId) => (
@@ -138,10 +144,6 @@
       }
     },
     store: () => store,
-    components: {
-      VirtualList,
-      PseudoVirtualList
-    },
     events: {
       focusWithCapture,
       blurWithCapture

routes/_utils/asyncModules.js

@@ -25,3 +25,19 @@ export const importWebSocketClient = () => import(
 export const importDialogs = () => import(
   /* webpackChunkName: 'dialogs' */ '../_components/dialog/dialogs.js'
   )
+
+export const importVirtualList = () => import(
+  /* webpackChunkName: 'VirtualList.html' */ '../_components/virtualList/VirtualList.html'
+  ).then(mod => mod.default)
+
+export const importPseudoVirtualList = () => import(
+  /* webpackChunkName: 'PseudoVirtualList.html' */ '../_components/pseudoVirtualList/PseudoVirtualList.html'
+  ).then(mod => mod.default)
+
+export const importStatusVirtualListItem = () => import(
+  /* webpackChunkName: 'StatusVirtualListItem.html' */ '../_components/timeline/StatusVirtualListItem.html'
+  ).then(mod => mod.default)
+
+export const importNotificationVirtualListItem = () => import(
+  /* webpackChunkName: 'NotificationVirtualListItem.html' */ '../_components/timeline/NotificationVirtualListItem.html'
+  ).then(mod => mod.default)