fix loading spinner

routes/_components/timeline/LazyTimeline.html

@@ -1,12 +1,5 @@
 <div class="lazy-timeline">
-  {{#if !$initialized}}
+  {{#await importTimeline}}
-    <!-- <div transition:fade> -->
-      <div class="loading-page">
-        <LoadingSpinner />
-      </div>
-    <!-- </div> -->
-  {{/if}}
-  {{#await promise}}
   {{then constructor}}
     <:Component {constructor} :timeline />
   {{catch error}}
@@ -18,23 +11,9 @@
     width: 100%;
     min-height: 60vh;
   }
-  .loading-page {
-    position: fixed;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 50;
-  }
 </style>
 <script>
   import { importTimeline } from '../../_utils/asyncModules'
-  import LoadingSpinner from '../LoadingSpinner.html'
-  // TODO: the transition seems to occasionally cause an error in Svelte, transition_run is undefined
-  //import { fade } from 'svelte-transitions'
   import { store } from '../../_store/store'
 
   export default {
@@ -46,13 +25,7 @@
     },
     store: () => store,
     data: () => ({
-      promise: importTimeline()
+      importTimeline: importTimeline()
-    }),
+    })
-    components: {
-      LoadingSpinner
-    }/*,
-    transitions: {
-      fade
-    }*/
   }
 </script>

routes/_components/timeline/Timeline.html

@@ -1,4 +1,9 @@
 <div class="timeline" role="feed" aria-label="{{label}}">
+  {{#if !$initialized}}
+    <div class="loading-page">
+      <LoadingSpinner />
+    </div>
+  {{/if}}
   {{#if virtual}}
     <VirtualList component="{{StatusVirtualListItem}}"
                  :makeProps
@@ -26,6 +31,18 @@
 <style>
   .timeline {
     min-height: 60vh;
+    position: relative;
+  }
+  .loading-page {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 50;
   }
 </style>
 <script>
@@ -38,6 +55,7 @@
   import { timelines } from '../../_static/timelines'
   import { database } from '../../_utils/database/database'
   import { initializeTimeline, fetchStatusesOnScrollToBottom, setupTimeline } from '../../_actions/timeline'
+  import LoadingSpinner from '../LoadingSpinner.html'
 
   export default {
     async oncreate() {
@@ -82,7 +100,8 @@
     store: () => store,
     components: {
       VirtualList,
-      PseudoVirtualList
+      PseudoVirtualList,
+      LoadingSpinner
     },
     methods: {
       initialize() {