fix: remove svelte #await (#1501)

src/routes/_components/Nav.html

@@ -13,13 +13,9 @@
     {/each}
 	</ul>
 </nav>
-{#await importNavShortcuts}
-<!-- awaiting nav shortcuts promise -->
-{:then component}
-<svelte:component this={component}/>
-{:catch error}
-<!-- nav shortcuts {error} -->
-{/await}
+{#if navShortcuts}
+  <svelte:component this={navShortcuts}/>
+{/if}
 
 <style>
 	.main-nav {
@@ -58,12 +54,16 @@
   import { store } from '../_store/store'
 
   export default {
+    async oncreate () {
+      const navShortcuts = await importNavShortcuts()
+      this.set({ navShortcuts })
+    },
     store: () => store,
     components: {
       NavItem
     },
     data: () => ({
-      importNavShortcuts: importNavShortcuts()
+      navShortcuts: undefined
     })
   }
 </script>

src/routes/_components/compose/LazyComposeBox.html

@@ -1,16 +1,16 @@
-{#await importComposeBox}
-<!-- awaiting promise -->
-{:then ComposeBox}
-<svelte:component this={ComposeBox} {realm} {hidden} />
-{:catch error}
-<div>Component failed to load. Try refreshing! {error}</div>
-{/await}
+{#if composeBox}
+  <svelte:component this={composeBox} {realm} {hidden} />
+{/if}
 <script>
   import { importComposeBox } from '../../_utils/asyncModules'
 
   export default {
+    async oncreate () {
+      const composeBox = await importComposeBox()
+      this.set({ composeBox })
+    },
     data: () => ({
-      importComposeBox: importComposeBox()
+      composeBox: undefined
     })
   }
 </script>

src/routes/_components/timeline/LazyTimeline.html

@@ -1,11 +1,7 @@
 <div class="lazy-timeline">
-  {#await importTimeline}
-    <!-- awaiting promise -->
-  {:then constructor}
-    <svelte:component this={constructor} {timeline} />
-  {:catch error}
-    <div>Component failed to load. Try refreshing! {error}</div>
-  {/await}
+  {#if timelineComponent}
+    <svelte:component this={timelineComponent} {timeline} />
+  {/if}
 </div>
 <style>
   .lazy-timeline {
@@ -13,19 +9,24 @@
   }
 </style>
 <script>
-  import { importTimeline } from '../../_utils/asyncModules'
   import { store } from '../../_store/store'
+  import { importTimeline } from '../../_utils/asyncModules'
 
   export default {
-    oncreate () {
+    async oncreate () {
+      console.log('LazyTimeline oncreate')
       const { currentInstance } = this.store.get()
       const { timeline } = this.get()
       this.store.set({ currentTimeline: timeline })
       this.store.setForTimeline(currentInstance, timeline, { runningUpdate: false })
+      console.log('importing timeline')
+      const timelineComponent = await importTimeline()
+      console.log('imported timeline')
+      this.set({ timelineComponent })
     },
     store: () => store,
     data: () => ({
-      importTimeline: importTimeline()
+      timelineComponent: undefined
     })
   }
 </script>

src/routes/_components/timeline/Timeline.html

@@ -4,11 +4,9 @@
      on:focusin="saveFocus(event)"
      on:focusout="clearFocus()"
 >
-  {#await componentsPromise}
-    <!-- awaiting promise -->
-  {:then result}
-    <svelte:component this={result.listComponent}
-                component={result.listItemComponent}
+  {#if components}
+    <svelte:component this={components.listComponent}
+                component={components.listItemComponent}
                 realm="{$currentInstance + '/' + timeline}"
                 {makeProps}
                 items={itemIds}
@@ -24,9 +22,7 @@
                 on:initialized="initialize()"
                 on:noNeedToScroll="onNoNeedToScroll()"
     />
-  {:catch error}
-    <div>Error: component failed to load! Try reloading. {error}</div>
-  {/await}
+  {/if}
 </div>
 <Shortcut scope="global" key="." on:pressed="showMoreAndScrollToTop()" />
 <ScrollListShortcuts />
@@ -66,6 +62,7 @@
       setupTimeline()
       this.restoreFocus()
       this.setupStreaming()
+      this.setupAsyncComponents()
     },
     ondestroy () {
       console.log('ondestroy')
@@ -75,7 +72,8 @@
       LoadingFooter,
       MoreHeaderVirtualWrapper,
       Status,
-      scrollTop: 0
+      scrollTop: 0,
+      components: undefined
     }),
     computed: {
       // For threads, it's simpler to just render all items as a pseudo-virtual list
@@ -230,6 +228,16 @@
       teardownFocus () {
         window.removeEventListener('pushState', this.onPushState)
       },
+      setupAsyncComponents () {
+        this.observe('componentsPromise', async componentsPromise => {
+          if (componentsPromise) {
+            console.log('loading timeline components')
+            const components = await componentsPromise
+            console.log('loaded timeline components')
+            this.set({ components })
+          }
+        })
+      },
       onPushState () {
         this.store.setForCurrentTimeline({ ignoreBlurEvents: true })
       },