From cb91271e23b088e584b17cd64a14ecbcc1364080 Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Tue, 30 Jan 2018 22:21:31 -0800
Subject: [PATCH] fix loading spinner

---
 routes/_components/timeline/LazyTimeline.html | 33 ++-----------------
 routes/_components/timeline/Timeline.html     | 21 +++++++++++-
 2 files changed, 23 insertions(+), 31 deletions(-)

diff --git a/routes/_components/timeline/LazyTimeline.html b/routes/_components/timeline/LazyTimeline.html
index 8e384395..027cb66d 100644
--- a/routes/_components/timeline/LazyTimeline.html
+++ b/routes/_components/timeline/LazyTimeline.html
@@ -1,12 +1,5 @@
 <div class="lazy-timeline">
-  {{#if !$initialized}}
-    <!-- <div transition:fade> -->
-      <div class="loading-page">
-        <LoadingSpinner />
-      </div>
-    <!-- </div> -->
-  {{/if}}
-  {{#await promise}}
+  {{#await importTimeline}}
   {{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()
-    }),
-    components: {
-      LoadingSpinner
-    }/*,
-    transitions: {
-      fade
-    }*/
+      importTimeline: importTimeline()
+    })
   }
 </script>
\ No newline at end of file
diff --git a/routes/_components/timeline/Timeline.html b/routes/_components/timeline/Timeline.html
index c1ef8bb1..58d98507 100644
--- a/routes/_components/timeline/Timeline.html
+++ b/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() {