async load PseudoVirtualList

routes/_components/timeline/Timeline.html

@@ -25,9 +25,12 @@
                  on:initializedVisibleItems="initialize()"
     />
   {{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 -->
-    <PseudoVirtualList component="{{VirtualListComponent}}"
+      <:Component {PseudoVirtualList}
+                 component="{{VirtualListComponent}}"
                  realm="{{$currentInstance + '/' + timeline}}"
                  containerQuery=".container"
                  :makeProps
@@ -36,6 +39,9 @@
                  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

@@ -28,3 +28,7 @@ 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)