From 75d78d44a20d278cb56c51bf17493231b31713f4 Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Sun, 21 Jan 2018 14:31:59 -0800
Subject: [PATCH] add a nice fade effect

---
 routes/_components/Timeline.html    | 6 ++++--
 routes/_components/VirtualList.html | 3 ++-
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/routes/_components/Timeline.html b/routes/_components/Timeline.html
index a52db71b..7b7a5f32 100644
--- a/routes/_components/Timeline.html
+++ b/routes/_components/Timeline.html
@@ -1,8 +1,10 @@
 <:Window bind:online />
-<div class="timeline" role="feed" aria-label="{{label}}" on:initialized >
+<div class="timeline" role="feed" aria-label="{{label}}" on:initialized>
   <VirtualList component="{{StatusListItem}}"
                items="{{keyedStatuses}}"
-               on:scrollToBottom="onScrollToBottom()" />
+               on:scrollToBottom="onScrollToBottom()"
+               shown="{{initialized}}"
+  />
 </div>
 <style>
   .timeline {
diff --git a/routes/_components/VirtualList.html b/routes/_components/VirtualList.html
index 6e4538dc..9c444bbf 100644
--- a/routes/_components/VirtualList.html
+++ b/routes/_components/VirtualList.html
@@ -1,5 +1,5 @@
 <!-- TODO: setting height is hacky, just make this element the scroller -->
-<div class="virtual-list" style="height: {{$height}}px;">
+<div class="virtual-list {{shown ? '' : 'hidden'}}" style="height: {{$height}}px;">
   {{#each $visibleItems as item @key}}
   <VirtualListItem :component
                    offset="{{item.offset}}"
@@ -12,6 +12,7 @@
 <style>
   .virtual-list {
     position: relative;
+    transition: opacity 0.25s linear;
   }
 </style>
 <script>