From ed53f24edec24ad5e20f699562b8111a464fa45b Mon Sep 17 00:00:00 2001
From: thislight <l1589002388@gmail.com>
Date: Mon, 18 Nov 2024 23:29:44 +0800
Subject: [PATCH] PreviewCard: indicates loading

---
 src/timelines/toot-components/PreviewCard.css |  4 ++++
 src/timelines/toot-components/PreviewCard.tsx | 10 ++++++++++
 2 files changed, 14 insertions(+)

diff --git a/src/timelines/toot-components/PreviewCard.css b/src/timelines/toot-components/PreviewCard.css
index a62c17c..7730679 100644
--- a/src/timelines/toot-components/PreviewCard.css
+++ b/src/timelines/toot-components/PreviewCard.css
@@ -19,6 +19,10 @@
     background-color: var(--tutu-color-surface);
     max-width: 100%;
     height: auto;
+
+    &.loaded {
+      background-color: #eeeeee;
+    }
   }
 
   &:hover,
diff --git a/src/timelines/toot-components/PreviewCard.tsx b/src/timelines/toot-components/PreviewCard.tsx
index ed20eb8..88a2cec 100644
--- a/src/timelines/toot-components/PreviewCard.tsx
+++ b/src/timelines/toot-components/PreviewCard.tsx
@@ -5,6 +5,14 @@ import { Title, Body1 } from "../../material/typography";
 import { averageColorHex } from "../../platform/blurhash";
 import "./PreviewCard.css";
 
+function onResetImg(event: Event & { currentTarget: HTMLImageElement }) {
+  event.currentTarget.classList.remove("loaded");
+}
+
+function onImgLoaded(event: Event & { currentTarget: HTMLImageElement }) {
+  event.currentTarget.classList.add("loaded");
+}
+
 export function PreviewCard(props: {
   src: mastodon.v1.PreviewCard;
   alwaysCompact?: boolean;
@@ -81,6 +89,8 @@ export function PreviewCard(props: {
     >
       <Show when={props.src.image}>
         <img
+          onLoadStart={onResetImg}
+          onLoad={onImgLoaded}
           crossOrigin="anonymous"
           src={props.src.image!}
           width={props.src.width || undefined}