start on async status

routes/_components/search/SearchResults.html

@@ -1,14 +1,17 @@
-<ul class="search-results">
-  {{#each $searchResults.hashtags as hashtag}}
-    <HashtagSearchResult :hashtag />
-  {{/each}}
-  {{#each $searchResults.accounts as account}}
-    <AccountSearchResult :account />
-  {{/each}}
-  {{#each $searchResults.statuses as status, index}}
-  <StatusSearchResult :status :index length="{{$searchResults.statuses.length}}"/>
-  {{/each}}
-</ul>
+{{#await importStatusSearchResult}}
+{{then StatusSearchResult}}
+  <ul class="search-results">
+    {{#each $searchResults.hashtags as hashtag}}
+      <HashtagSearchResult :hashtag />
+    {{/each}}
+    {{#each $searchResults.accounts as account}}
+      <AccountSearchResult :account />
+    {{/each}}
+    {{#each $searchResults.statuses as status, index}}
+      <:Component {StatusSearchResult} :status :index length="{{$searchResults.statuses.length}}"/>
+    {{/each}}
+  </ul>
+{{/await}}
 <style>
   .search-results {
     list-style: none;
@@ -22,9 +25,13 @@
   import AccountSearchResult from './AccountSearchResult.html'
   import HashtagSearchResult from './HashtagSearchResult.html'
   import StatusSearchResult from './StatusSearchResult.html'
+  import { importStatusRendering } from '../../_utils/asyncModules'
 
   export default {
     store: () => store,
+    data: () => ({
+      importStatusSearchResult: importStatusRendering().then(mod => mod.StatusSearchResult)
+    }),
     components: {
       AccountSearchResult,
       HashtagSearchResult,

routes/_components/statusRendering.js

@@ -0,0 +1,13 @@
+import Status from './status/Status.html'
+import Notification from './status/Notification.html'
+import StatusVirtualListItem from './timeline/StatusVirtualListItem.html'
+import NotificationVirtualListItem from './timeline/NotificationVirtualListItem.html'
+import StatusSearchResult from './search/StatusSearchResult.html'
+
+export {
+  Status,
+  Notification,
+  StatusVirtualListItem,
+  NotificationVirtualListItem,
+  StatusSearchResult
+}

routes/_components/timeline/Timeline.html

@@ -7,42 +7,45 @@
   {{#if !$initialized}}
     <LoadingPage />
   {{/if}}
-  {{#if virtual}}
-    <VirtualList component="{{VirtualListComponent}}"
-                 realm="{{$currentInstance + '/' + timeline}}"
-                 containerQuery=".container"
-                 :makeProps
-                 items="{{$timelineItemIds}}"
-                 shown="{{$initialized}}"
-                 showFooter="{{$initialized && $runningUpdate}}"
-                 footerComponent="{{LoadingFooter}}"
-                 showHeader="{{$showHeader}}"
-                 headerComponent="{{MoreHeaderVirtualWrapper}}"
-                 :headerProps
-                 on:scrollToBottom="onScrollToBottom()"
-                 on:scrollToTop="onScrollToTop()"
-                 on:scrollTopChanged="onScrollTopChanged(event)"
-                 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 -->
-      <:Component {PseudoVirtualList}
-                 component="{{VirtualListComponent}}"
-                 realm="{{$currentInstance + '/' + timeline}}"
-                 containerQuery=".container"
-                 :makeProps
-                 items="{{$timelineItemIds}}"
-                 shown="{{$initialized}}"
-                 scrollToItem="{{scrollToItem}}"
-                 on:initializedVisibleItems="initialize()"
+  {{#await importListItemComponent}}
+  {{then ListItemComponent}}
+    {{#if virtual}}
+      <VirtualList component="{{ListItemComponent}}"
+                   realm="{{$currentInstance + '/' + timeline}}"
+                   containerQuery=".container"
+                   :makeProps
+                   items="{{$timelineItemIds}}"
+                   shown="{{$initialized}}"
+                   showFooter="{{$initialized && $runningUpdate}}"
+                   footerComponent="{{LoadingFooter}}"
+                   showHeader="{{$showHeader}}"
+                   headerComponent="{{MoreHeaderVirtualWrapper}}"
+                   :headerProps
+                   on:scrollToBottom="onScrollToBottom()"
+                   on:scrollToTop="onScrollToTop()"
+                   on:scrollTopChanged="onScrollTopChanged(event)"
+                   on:initializedVisibleItems="initialize()"
       />
-    {{catch error}}
-      <div>Component failed to load. Try refreshing! {{error}}</div>
-    {{/await}}
-  {{/if}}
+    {{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="{{ListItemComponent}}"
+                   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}}
+  {{/await}}
 </div>
 <style>
   .timeline {
@@ -66,7 +69,7 @@
   import { showMoreItemsForCurrentTimeline } from '../../_actions/timeline'
   import { scheduleIdleTask } from '../../_utils/scheduleIdleTask'
   import { mark, stop } from '../../_utils/marks'
-  import { importPseudoVirtualList } from '../../_utils/asyncModules'
+  import { importPseudoVirtualList, importStatusRendering } from '../../_utils/asyncModules'
 
   export default {
     oncreate() {
@@ -92,8 +95,12 @@
       importPseudoVirtualList: (virtual) => {
         return !virtual && importPseudoVirtualList()
       },
-      VirtualListComponent: (timelineType) => {
-        return timelineType === 'notifications' ? NotificationVirtualListItem : StatusVirtualListItem
+      importListItemComponent: (timelineType) => {
+        return importStatusRendering().then(mod => {
+          return timelineType === 'notifications'
+            ? mod.NotificationVirtualListItem
+            : mod.StatusVirtualListItem
+        })
       },
       makeProps: ($currentInstance, timelineType, timelineValue) => async (itemId) => {
         let res = { timelineType, timelineValue }

routes/_utils/asyncModules.js

@@ -35,4 +35,8 @@ export const importPseudoVirtualList = () => import(
 
 export const importDialogs = () => import(
   /* webpackChunkName: 'dialogs' */ '../_components/dialog/dialogs.js'
+  )
+
+export const importStatusRendering = () => import(
+  /* webpackChunkName: 'statusRendering' */ '../_components/statusRendering.js'
   )

routes/pinned.html

@@ -8,11 +8,14 @@
     {{#if loading}}
     <LoadingPage />
     {{elseif statuses && statuses.length}}
-    <ul class="pinned-toots-results">
-      {{#each statuses as status}}
-      <StatusSearchResult :status />
-      {{/each}}
-    </ul>
+    {{#await importStatusSearchResult}}
+    {{then StatusSearchResult}}
+      <ul class="pinned-toots-results">
+        {{#each statuses as status}}
+          <:Component {StatusSearchResult} :status />
+        {{/each}}
+      </ul>
+    {{/await}}
     {{/if}}
   </div>
 </Layout>
@@ -43,6 +46,7 @@
   import DynamicPageBanner from './_components/DynamicPageBanner.html'
   import { getPinnedStatuses } from './_api/pinnedStatuses'
   import { updateVerifyCredentialsForInstance } from './_actions/instances'
+  import { importStatusRendering } from './_utils/asyncModules'
 
   export default {
     async oncreate() {
@@ -62,7 +66,8 @@
     },
     data: () => ({
       loading: true,
-      accounts: []
+      accounts: [],
+      importStatusSearchResult: importStatusRendering().then(mod => mod.StatusSearchResult)
     }),
     store: () => store,
     components: {