From caecddc171d9719a26b0fb48a61b1c2fa381d0f0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1=C5=A1=20Ml=C3=A1dek?= <t@mldk.cz>
Date: Wed, 13 Jan 2021 22:43:36 +0100
Subject: [PATCH] if an image doesn't load in 3s, show a gray placeholder

---
 app/src/components/VideoScroll.vue | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/app/src/components/VideoScroll.vue b/app/src/components/VideoScroll.vue
index 9bc5850..511366b 100644
--- a/app/src/components/VideoScroll.vue
+++ b/app/src/components/VideoScroll.vue
@@ -73,8 +73,14 @@ export default defineComponent({
           if (!element.src) {
             console.debug(`[VIDEOSCROLL] Intersected, loading ${element.dataset.src}`);
             element.src = element.dataset.src!;
+            const grayTimeout = setTimeout(() => {
+              element.classList.add("visible");
+              element.style.background = "grey";
+            }, 3000);
             element.onload = () => {
-              element.classList.add("loaded");
+              clearTimeout(grayTimeout);
+              element.classList.add("visible");
+              element.style.background = "none";
               if (this.isHorizontal) {
                 element.style.height = "auto";
               } else {
@@ -119,7 +125,7 @@ export interface VideoScrollDef {
   transition: opacity .5s;
 }
 
-.loaded {
+.visible {
   opacity: 1 !important;
 }