cswimr/revite
1
0
Fork 0
mirror of https://github.com/revoltchat/revite.git synced 2024-11-22 15:10:57 -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 { .image {
cursor: pointer; 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 { openScreen } = useIntermediate();
const { filename, metadata } = attachment; const { filename, metadata } = attachment;
const [spoiler, setSpoiler] = useState(filename.startsWith("SPOILER_")); const [spoiler, setSpoiler] = useState(filename.startsWith("SPOILER_"));
// only used in image attachments
const [loading, setLoading] = useState(true);
const url = client.generateFileURL( const url = client.generateFileURL(
attachment, attachment,
@ -39,6 +41,7 @@ export default function Attachment({ attachment, hasContent }: Props) {
height={metadata.height} height={metadata.height}
className={classNames({ className={classNames({
[styles.margin]: hasContent, [styles.margin]: hasContent,
[styles.loading]: loading,
spoiler, spoiler,
})}> })}>
<img <img
@ -49,6 +52,9 @@ export default function Attachment({ attachment, hasContent }: Props) {
onClick={() => onClick={() =>
openScreen({ id: "image_viewer", attachment }) openScreen({ id: "image_viewer", attachment })
} }
onLoad={() =>
setLoading(false)
}
onMouseDown={(ev) => onMouseDown={(ev) =>
ev.button === 1 && window.open(url, "_blank") ev.button === 1 && window.open(url, "_blank")
} }