From 98c0defacc60aa56e02bf3b31454732a03c435a1 Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Wed, 24 Jan 2018 19:26:08 -0800
Subject: [PATCH] tweak animation for revealing the timeline

---
 routes/_components/Timeline.html    | 19 ++++++++++++-------
 routes/_components/VirtualList.html | 10 +++++++++-
 2 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/routes/_components/Timeline.html b/routes/_components/Timeline.html
index 5a20a32..9613fa4 100644
--- a/routes/_components/Timeline.html
+++ b/routes/_components/Timeline.html
@@ -8,6 +8,7 @@
                footerComponent="{{LoadingFooter}}"
                showFooter="{{initialized && runningUpdate}}"
                storeKey="{{timeline}}"
+               on:initializedVisibleItems="initialize()"
   />
 </div>
 <style>
@@ -45,13 +46,6 @@
       } else {
         this.addStatuses(await this.fetchStatusesAndPossiblyFallBack())
       }
-      // TODO: this is just a guess. allVisibleItemsHaveHeight should be more accurate
-      requestAnimationFrame(() => {
-        requestAnimationFrame(() => {
-          this.set({initialized: true})
-          this.fire('initialized')
-        })
-      })
     },
     ondestroy() {
       cachedTimelines[this.get('timeline')] = this.get('statusIds')
@@ -85,6 +79,17 @@
     methods: {
       splice: splice,
       push: push,
+      initialize() {
+        if (this.get('initialized') || !this.get('statusIds') || !this.get('statusIds').length) {
+          return
+        }
+        requestAnimationFrame(() => {
+          requestAnimationFrame(() => {
+            this.set({initialized: true})
+            this.fire('initialized')
+          })
+        })
+      },
       async onScrollToBottom() {
         if (!this.get('initialized')) {
           return
diff --git a/routes/_components/VirtualList.html b/routes/_components/VirtualList.html
index 025fe33..5157253 100644
--- a/routes/_components/VirtualList.html
+++ b/routes/_components/VirtualList.html
@@ -44,6 +44,12 @@
         }, SCROLL_TO_BOTTOM_DELAY)
       })
 
+      this.observe('allVisibleItemsHaveHeight', allVisibleItemsHaveHeight => {
+        if (allVisibleItemsHaveHeight) {
+          this.fire('initializedVisibleItems')
+        }
+      })
+
       let observedOnce = false
 
       this.observe('distanceFromBottom', (distanceFromBottom) => {
@@ -68,7 +74,9 @@
     computed: {
       distanceFromBottom: ($scrollHeight, $scrollTop, $offsetHeight) => {
         return $scrollHeight - $scrollTop - $offsetHeight
-      }
+      },
+      // TODO: bug in svelte store, shouldn't need to do this
+      allVisibleItemsHaveHeight: ($allVisibleItemsHaveHeight) => $allVisibleItemsHaveHeight
     }
   }
 </script>
\ No newline at end of file