Revert "make PseudoVirtualList sync rather than async (#133)"

This reverts commit e23aa97cf2.

routes/_components/timeline/Timeline.html

@@ -22,17 +22,22 @@
                  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()"
-    />
+    {{#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()"
+      />
+    {{catch error}}
+      <div>Component failed to load. Try refreshing! {{error}}</div>
+    {{/await}}
   {{/if}}
 </div>
 <script>
@@ -43,7 +48,6 @@
   import LoadingFooter from './LoadingFooter.html'
   import MoreHeaderVirtualWrapper from './MoreHeaderVirtualWrapper.html'
   import VirtualList from '../virtualList/VirtualList.html'
-  import PseudoVirtualList from '../pseudoVirtualList/PseudoVirtualList.html'
   import { timelines } from '../../_static/timelines'
   import {
     getStatus as getStatusFromDatabase,
@@ -59,6 +63,7 @@
   import { focusWithCapture, blurWithCapture } from '../../_utils/events'
   import { scheduleIdleTask } from '../../_utils/scheduleIdleTask'
   import { mark, stop } from '../../_utils/marks'
+  import { importPseudoVirtualList } from '../../_utils/asyncModules'
   import isEqual from 'lodash-es/isEqual'
   import { doubleRAF } from '../../_utils/doubleRAF'
 
@@ -81,6 +86,9 @@
       scrollTop: 0
     }),
     computed: {
+      importPseudoVirtualList: (virtual) => {
+        return !virtual && importPseudoVirtualList()
+      },
       VirtualListComponent: (timelineType) => {
         return timelineType === 'notifications' ? NotificationVirtualListItem : StatusVirtualListItem
       },
@@ -141,8 +149,7 @@
     },
     store: () => store,
     components: {
-      VirtualList,
-      PseudoVirtualList
+      VirtualList
     },
     events: {
       focusWithCapture,

routes/_utils/asyncModules.js

@@ -22,6 +22,10 @@ export const importWebSocketClient = () => import(
   /* webpackChunkName: '@gamestdio/websocket' */ '@gamestdio/websocket'
   ).then(mod => mod.default)
 
+export const importPseudoVirtualList = () => import(
+  /* webpackChunkName: 'PseudoVirtualList' */ '../_components/pseudoVirtualList/PseudoVirtualList.html'
+  ).then(mod => mod.default)
+
 export const importDialogs = () => import(
   /* webpackChunkName: 'dialogs' */ '../_components/dialog/dialogs.js'
   )