From eb486ef4b755bd844c243089b031c75d7a929c56 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fernando=20Fern=C3=A1ndez?= Date: Fri, 5 Nov 2021 01:13:50 +0100 Subject: [PATCH] Reduce blink when switching between image and blurhash --- src/components/images/imageLoader.js | 22 +++++++++++++++++----- 1 file changed, 17 insertions(+), 5 deletions(-) diff --git a/src/components/images/imageLoader.js b/src/components/images/imageLoader.js index ae237f73c..63c3dd2ef 100644 --- a/src/components/images/imageLoader.js +++ b/src/components/images/imageLoader.js @@ -106,11 +106,23 @@ import './style.scss'; elem.classList.add('lazy-image-fadein'); } - const canvas = elem.previousSibling; - if (elem.classList.contains('blurhashed') && canvas && canvas.tagName === 'CANVAS') { - canvas.classList.remove('lazy-image-fadein-fast', 'lazy-image-fadein'); - canvas.classList.add('lazy-hidden'); - } + elem.addEventListener('transitionend', () => { + requestIdleCallback(() => { + const canvas = elem.previousSibling; + if ( + elem.classList.contains('blurhashed') && + canvas && + canvas.tagName === 'CANVAS' + ) { + canvas.classList.remove( + 'lazy-image-fadein-fast', + 'lazy-image-fadein' + ); + canvas.classList.add('lazy-hidden'); + } + }); + // Run the event listener only once after being added + }, false); }); }); }