cswimr/revite
1
0
Fork 0
mirror of https://github.com/revoltchat/revite.git synced 2024-11-26 00:50:56 -05:00
Code Issues Projects Releases Packages Wiki Activity

Add (basic implementation of) background for loading images

Browse source
This commit is contained in:
Michaili K 2021-08-15 12:59:00 +02:00
parent 4abf98adcb
commit 1b4d1e73df
No known key found for this signature in database
GPG key ID: BD613494318FEBA0
2 changed files with 10 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/components/common/messaging/attachments/Attachment.module.scss
View file

@ -93,3 +93,7 @@
.image {
cursor: pointer;
}
.loading {
background: var(--background);
}

6
src/components/common/messaging/attachments/Attachment.tsx
View file

@ -24,6 +24,8 @@ export default function Attachment({ attachment, hasContent }: Props) {
const { openScreen } = useIntermediate();
const { filename, metadata } = attachment;
const [spoiler, setSpoiler] = useState(filename.startsWith("SPOILER_"));
// only used in image attachments
const [loading, setLoading] = useState(true);
const url = client.generateFileURL(
attachment,
@ -39,6 +41,7 @@ export default function Attachment({ attachment, hasContent }: Props) {
height={metadata.height}
className={classNames({
[styles.margin]: hasContent,
[styles.loading]: loading,
spoiler,
})}>
<img
@ -49,6 +52,9 @@ export default function Attachment({ attachment, hasContent }: Props) {
onClick={() =>
openScreen({ id: "image_viewer", attachment })
}
onLoad={() =>
setLoading(false)
}
onMouseDown={(ev) =>
ev.button === 1 && window.open(url, "_blank")
}