From 0ce47f0379340022c2caca537004493c308fba8d Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Tue, 28 Apr 2020 17:48:31 -0700
Subject: [PATCH] fix: fix fade animations on slow devices (#1751)

I noticed that, on 6x CPU throttling in Chrome, the status fade-in animations were not consistent when switching columns. This fixes that using rAF.
---
 .../_components/virtualList/VirtualListItem.html  | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/routes/_components/virtualList/VirtualListItem.html b/src/routes/_components/virtualList/VirtualListItem.html
index 50fc61c8..f4ca2783 100644
--- a/src/routes/_components/virtualList/VirtualListItem.html
+++ b/src/routes/_components/virtualList/VirtualListItem.html
@@ -29,6 +29,8 @@
   import { registerResizeListener, unregisterResizeListener } from '../../_utils/resize'
   import { mark, stop } from '../../_utils/marks'
   import { requestPostAnimationFrame } from '../../_utils/requestPostAnimationFrame'
+  import { observe } from 'svelte-extras'
+  import { doubleRAF } from '../../_utils/doubleRAF'
 
   export default {
     oncreate () {
@@ -46,15 +48,26 @@
       })
       this.doRecalculateHeight = this.doRecalculateHeight.bind(this)
       registerResizeListener(this.doRecalculateHeight)
+      // this rAF delay is necessary in order to get the fade-in animation
+      // to consistently show
+      this.observe('shownBeforeRaf', shownBeforeRaf => {
+        doubleRAF(() => {
+          this.set({ shown: shownBeforeRaf })
+        })
+      })
     },
     ondestroy () {
       unregisterResizeListener(this.doRecalculateHeight)
     },
     store: () => virtualListStore,
+    data: () => ({
+      shown: false
+    }),
     computed: {
-      shown: ({ $itemHeights, key }) => $itemHeights[key] > 0
+      shownBeforeRaf: ({ $itemHeights, key }) => $itemHeights[key] > 0
     },
     methods: {
+      observe,
       doRecalculateHeight () {
         // Recalculate immediately because this is done on-demand, e.g.
         // when clicking the "More" button on a spoiler.