From f5cce18a55a67b49edf214f3d617eeb085875caf Mon Sep 17 00:00:00 2001 From: infinite-persistence Date: Thu, 16 Dec 2021 15:33:15 +0800 Subject: [PATCH] Disable `placeholder` animation ## Issue https://www.notion.so/Performance-Fixes-927f825a5d674bd09323830be1d263af#1beab2fee011421492b56b88f68681a3 We currently lazy-load the tiles in the category sections (but not the sections themselves, because we want to retain scroll position on Back action). This puts gray placeholders until the section is visible on screen. which turns out to be quite expensive, because the placeholders are animated, so we have a perpetual animation in the background after the homepage loads + user did not scroll. ## Change Just disable the barely-noticeable animation for now. There are alternatives, but probably not worth polluting the code with: - Just like the thumbnails, use intersection observer to decide when to animate. - Find solution to the "lazy load section + need to retain scroll position". --- ui/scss/init/_mixins.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/scss/init/_mixins.scss b/ui/scss/init/_mixins.scss index 3d626e238..af8d57973 100644 --- a/ui/scss/init/_mixins.scss +++ b/ui/scss/init/_mixins.scss @@ -186,7 +186,7 @@ } @mixin placeholder { - animation: pulse 2s infinite ease-in-out; + // animation: pulse 2s infinite ease-in-out; background-color: var(--color-placeholder-background); border-radius: var(--card-radius); border-width: 0;