async load PseudoVirtualList

routes/_components/timeline/Timeline.html

@@ -25,17 +25,23 @@
                  on:initializedVisibleItems="initialize()"
     />
   {{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}}"
-                       shown="{{$initialized}}"
-                       scrollToItem="{{scrollToItem}}"
-                       on:initializedVisibleItems="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}}"
+                 shown="{{$initialized}}"
+                 scrollToItem="{{scrollToItem}}"
+                 on:initializedVisibleItems="initialize()"
+      />
+    {{catch error}}
+      <div>Component failed to load. Try refreshing! {{error}}</div>
+    {{/await}}
   {{/if}}
 </div>
 <style>
@@ -49,7 +55,6 @@
   import StatusVirtualListItem from './StatusVirtualListItem.html'
   import NotificationVirtualListItem from './NotificationVirtualListItem.html'
   import Status from '../status/Status.html'
-  import PseudoVirtualList from '../pseudoVirtualList/PseudoVirtualList.html'
   import LoadingFooter from './LoadingFooter.html'
   import MoreHeaderVirtualWrapper from './MoreHeaderVirtualWrapper.html'
   import VirtualList from '../virtualList/VirtualList.html'
@@ -61,6 +66,7 @@
   import { showMoreItemsForCurrentTimeline } from '../../_actions/timeline'
   import { scheduleIdleTask } from '../../_utils/scheduleIdleTask'
   import { mark, stop } from '../../_utils/marks'
+  import { importPseudoVirtualList } from '../../_utils/asyncModules'
 
   export default {
     oncreate() {
@@ -83,6 +89,9 @@
       scrollTop: 0
     }),
     computed: {
+      importPseudoVirtualList: (virtual) => {
+        return !virtual && importPseudoVirtualList()
+      },
       VirtualListComponent: (timelineType) => {
         return timelineType === 'notifications' ? NotificationVirtualListItem : StatusVirtualListItem
       },
@@ -141,7 +150,6 @@
     store: () => store,
     components: {
       VirtualList,
-      PseudoVirtualList,
       LoadingPage
     },
     events: {

routes/_utils/asyncModules.js

@@ -27,4 +27,8 @@ export const importIndexedDBGetAllShim = () => import(
 
 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)