From 5732daf32ec9a19289579d3f6d1fcc352ca08792 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1=C5=A1=20Ml=C3=A1dek?= <t@mldk.cz>
Date: Sat, 9 Jan 2021 23:56:14 +0100
Subject: [PATCH] smoothly show loading images

---
 app/src/components/VideoScroll.vue | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/app/src/components/VideoScroll.vue b/app/src/components/VideoScroll.vue
index 2698ea7..6c878ed 100644
--- a/app/src/components/VideoScroll.vue
+++ b/app/src/components/VideoScroll.vue
@@ -39,6 +39,9 @@ export default defineComponent({
           if (entry.isIntersecting) {
             const element = entry.target as HTMLImageElement;
             element.src = element.dataset.src!;
+            element.onload = () => {
+              element.classList.add("visible");
+            };
           }
         });
       }, {rootMargin: "100px"});
@@ -85,5 +88,11 @@ function getMeta(url: string): Promise<HTMLImageElement> {
 .video-scroll img {
   position: absolute;
   image-rendering: optimizeSpeed;
+  opacity: 0;
+  transition: opacity .5s;
+}
+
+.visible {
+  opacity: 1 !important;
 }
 </style>