fix show/hide of timelines

routes/_actions/streaming.js

@@ -6,7 +6,7 @@ import { scheduleIdleTask } from '../_utils/scheduleIdleTask'
 
 async function removeDuplicates (instanceName, timelineName, updates) {
   // remove duplicates, including duplicates due to reblogs
-  let timelineItemIds = store.getForTimeline(instanceName, timelineName, 'timelineItemIds')
+  let timelineItemIds = store.getForTimeline(instanceName, timelineName, 'timelineItemIds') || []
   let reblogIds = (await Promise.all(timelineItemIds.map(async timelineItemId => {
     let status = await database.getStatus(instanceName, timelineItemId)
     return status.reblog && status.reblog.id
@@ -30,10 +30,12 @@ async function handleFreshChanges (instanceName, timelineName) {
 
     await database.insertTimelineItems(instanceName, timelineName, updates)
 
-    let itemIdsToAdd = store.getForTimeline(instanceName, timelineName, 'itemIdsToAdd') || []
+    let itemIdsToAdd = store.getForTimeline(instanceName, timelineName, 'itemIdsToAdd')
+    if (itemIdsToAdd && itemIdsToAdd.length) {
       itemIdsToAdd = itemIdsToAdd.concat(updates.map(_ => _.id))
       store.setForTimeline(instanceName, timelineName, {itemIdsToAdd: itemIdsToAdd})
     }
+  }
 }
 
 function handleStreamMessage (instanceName, timelineName, message) {

routes/_actions/timeline.js

@@ -59,6 +59,7 @@ export function initializeTimeline () {
   let timeline = store.get('currentTimeline')
   requestAnimationFrame(() => {
     requestAnimationFrame(() => {
+      console.log('initialized')
       store.setForTimeline(instanceName, timeline, {initialized: true})
     })
   })

routes/_components/LoadingPage.html

@@ -1,4 +1,4 @@
-<div class="loading-page">
+<div class="loading-page {{shown ? '' : 'hidden'}}">
   <LoadingSpinner />
 </div>
 <style>
@@ -12,11 +12,17 @@
     align-items: center;
     justify-content: center;
     z-index: 50;
+    transition: opacity 0.25s linear;
   }
 </style>
 <script>
   import LoadingSpinner from './LoadingSpinner.html'
   export default {
+    oncreate() {
+      setTimeout(() => {
+        this.set({shown: true})
+      }, 200)
+    },
     components: {
       LoadingSpinner
     }

routes/_components/timeline/Timeline.html

@@ -75,8 +75,10 @@
       let timelineName = this.get('timeline')
       this.observe('itemIdsToAdd', itemIdsToAdd => {
         console.log('itemIdsToAdd', itemIdsToAdd)
+        if (itemIdsToAdd && itemIdsToAdd.length) {
           addTimelineItemIds(instanceName, timelineName, itemIdsToAdd)
-        this.store.setForTimeline(instanceName, timelineName, { itemIdsToAdd: [] })
+          this.store.setForTimeline(instanceName, timelineName, {itemIdsToAdd: []})
+        }
       })
     },
     ondestroy() {
@@ -151,9 +153,10 @@
     },
     methods: {
       initialize() {
-        if (this.store.get('initialized') || !this.store.get('timelineItemIds')) {
+        if (this.get('initializeStarted')) {
           return
         }
+        this.set({initializeStarted: true})
         console.log('timeline initialize()')
         initializeTimeline()
       },