Rubicon/tutu
1
0
Fork 0
Code Issues 18 Pull requests 1 Projects 1 Activity Actions

PreviewCard: indicates loading

Browse source
This commit is contained in:
thislight 2024-11-18 23:29:44 +08:00
parent 9b446aa846
commit ed53f24ede
No known key found for this signature in database
GPG key ID: FCFE5192241CCD4E
2 changed files with 14 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/timelines/toot-components/PreviewCard.css
View file

@ -19,6 +19,10 @@
background-color: var(--tutu-color-surface); background-color: var(--tutu-color-surface);
max-width: 100%; max-width: 100%;
height: auto; height: auto;
&.loaded {
background-color: #eeeeee;
}
} }
&:hover, &:hover,

10
src/timelines/toot-components/PreviewCard.tsx
View file

@ -5,6 +5,14 @@ import { Title, Body1 } from "../../material/typography";
import { averageColorHex } from "../../platform/blurhash"; import { averageColorHex } from "../../platform/blurhash";
import "./PreviewCard.css"; 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: { export function PreviewCard(props: {
src: mastodon.v1.PreviewCard; src: mastodon.v1.PreviewCard;
alwaysCompact?: boolean; alwaysCompact?: boolean;
@ -81,6 +89,8 @@ export function PreviewCard(props: {
> >
<Show when={props.src.image}> <Show when={props.src.image}>
<img <img
onLoadStart={onResetImg}
onLoad={onImgLoaded}
crossOrigin="anonymous" crossOrigin="anonymous"
src={props.src.image!} src={props.src.image!}
width={props.src.width || undefined} width={props.src.width || undefined}