Make files opaque until loaded

web/static/index.css

@@ -287,6 +287,11 @@ body {
     max-width: 100%;
 }
 
+.post-file-loading {
+    opacity: .4;
+    transition: opacity .2s;
+}
+
 .post-img-info {
     display: inline-block;
     font-size: 10px;

web/static/thread.js

@@ -37,14 +37,21 @@ function insertHeaderReplies() {
 }
 
 function togglePostFile(el) {
+    function makeOpaqueUntilReady(el, readyEvt) {
+        el.classList.add('post-file-loading');
+        el.addEventListener(readyEvt, () => el.classList.remove('post-file-loading'), { once: true });
+    }
+
     const imgEl = el.parentElement.parentElement.querySelector("img");
     const isVideo = imgEl.dataset.full.endsWith(".mp4") || imgEl.dataset.full.endsWith(".webm") || imgEl.dataset.full.endsWith(".ogg");
 
     if (isVideo) {
         const vidEl = imgEl.parentElement.querySelector("video");
+
         const closeVidBtn = imgEl.parentElement.querySelector(".link-button");
         if (vidEl.style.display === "none") {
             vidEl.src = "/media/posts/full/" + imgEl.dataset.full;
+            makeOpaqueUntilReady(vidEl, 'canplay');
             vidEl.style.display = "";
             imgEl.style.display = "none";
             closeVidBtn.style.display = "";
@@ -64,6 +71,8 @@ function togglePostFile(el) {
         else {
             imgEl.classList.add("post-img-full");
             imgEl.src = "/media/posts/full/" + imgEl.dataset.full;
+            if (!imgEl.complete)
+                makeOpaqueUntilReady(imgEl, 'load');
         }
     }
 }