async all the things

routes/_components/timeline/Timeline.html

@@ -4,50 +4,49 @@
      on:focusWithCapture="saveFocus(event)"
      on:blurWithCapture="clearFocus(event)"
 >
-  {{#if virtual}}
-    <VirtualList component="{{VirtualListComponent}}"
-                 realm="{{$currentInstance + '/' + timeline}}"
-                 containerQuery=".container"
-                 :makeProps
-                 items="{{$timelineItemIds}}"
-                 showFooter="{{$timelineInitialized && $runningUpdate}}"
-                 footerComponent="{{LoadingFooter}}"
-                 showHeader="{{$showHeader}}"
-                 headerComponent="{{MoreHeaderVirtualWrapper}}"
-                 :headerProps
-                 on:scrollToBottom="onScrollToBottom()"
-                 on:scrollToTop="onScrollToTop()"
-                 on:scrollTopChanged="onScrollTopChanged(event)"
-                 on:initialized="initialize()"
-                 on:noNeedToScroll="onNoNeedToScroll()"
-    />
-  {{else}}
-    {{#await importPseudoVirtualList}}
-    {{then PseudoVirtualList}}
-      <!-- if this is a status thread, it's easier to just render the
-           whole thing rather than use a virtual list -->
-      <:Component {PseudoVirtualList}
-                 component="{{VirtualListComponent}}"
-                 realm="{{$currentInstance + '/' + timeline}}"
-                 containerQuery=".container"
-                 :makeProps
-                 items="{{$timelineItemIds}}"
-                 scrollToItem="{{scrollToItem}}"
-                 on:initialized="initialize()"
+
+  {{#await importVirtualListAndComponent}}
+  {{then components}}
+    {{#if virtual}}
+      <!-- VirtualList -->
+      <:Component {components[0]}
+                  component="{{components[1]}}"
+                  realm="{{$currentInstance + '/' + timeline}}"
+                  containerQuery=".container"
+                  :makeProps
+                  items="{{$timelineItemIds}}"
+                  showFooter="{{$timelineInitialized && $runningUpdate}}"
+                  footerComponent="{{LoadingFooter}}"
+                  showHeader="{{$showHeader}}"
+                  headerComponent="{{MoreHeaderVirtualWrapper}}"
+                  :headerProps
+                  on:scrollToBottom="onScrollToBottom()"
+                  on:scrollToTop="onScrollToTop()"
+                  on:scrollTopChanged="onScrollTopChanged(event)"
+                  on:initialized="initialize()"
+                  on:noNeedToScroll="onNoNeedToScroll()"
       />
-    {{catch error}}
-      <div>Component failed to load. Try refreshing! {{error}}</div>
-    {{/await}}
-  {{/if}}
+    {{else}}
+      <!-- PseudoVirtualList -->
+      <:Component {components[0]}
+                  component="{{components[1]}}"
+                  realm="{{$currentInstance + '/' + timeline}}"
+                  containerQuery=".container"
+                  :makeProps
+                  items="{{$timelineItemIds}}"
+                  scrollToItem="{{scrollToItem}}"
+                  on:initialized="initialize()"
+      />
+    {{/if}}
+  {{catch error}}
+    <div>Component failed to load. Try refreshing! {{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 { timelines } from '../../_static/timelines'
   import {
     getStatus as getStatusFromDatabase,
@@ -63,7 +62,12 @@
   import { focusWithCapture, blurWithCapture } from '../../_utils/events'
   import { scheduleIdleTask } from '../../_utils/scheduleIdleTask'
   import { mark, stop } from '../../_utils/marks'
-  import { importPseudoVirtualList } from '../../_utils/asyncModules'
+  import {
+    importPseudoVirtualList,
+    importVirtualList,
+    importStatusVirtualListItem,
+    importNotificationVirtualListItem
+  } from '../../_utils/asyncModules'
   import isEqual from 'lodash-es/isEqual'
   import { doubleRAF } from '../../_utils/doubleRAF'
 
@@ -86,12 +90,15 @@
       scrollTop: 0
     }),
     computed: {
-      importPseudoVirtualList: (virtual) => {
-        return !virtual && importPseudoVirtualList()
-      },
-      VirtualListComponent: (timelineType) => {
-        return timelineType === 'notifications' ? NotificationVirtualListItem : StatusVirtualListItem
-      },
+      importVirtualList: (virtual) => (
+        virtual ? importVirtualList() : importPseudoVirtualList()
+      ),
+      importVirtualListComponent: (timelineType) => (
+        timelineType === 'notifications' ? importNotificationVirtualListItem() : importStatusVirtualListItem()
+      ),
+      importVirtualListAndComponent: (importVirtualList, importVirtualListComponent) => (
+        Promise.all([importVirtualList, importVirtualListComponent])
+      ),
       makeProps: ($currentInstance, timelineType, timelineValue) => async (itemId) => {
         let res = {
           timelineType,
@@ -148,9 +155,6 @@
       }
     },
     store: () => store,
-    components: {
-      VirtualList
-    },
     events: {
       focusWithCapture,
       blurWithCapture

routes/_utils/asyncModules.js

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