From 1b4d1e73df5c9343c16352ef9d086e54bd93d7c4 Mon Sep 17 00:00:00 2001
From: Michaili K <mysteriouscursor+git@protonmail.com>
Date: Sun, 15 Aug 2021 12:59:00 +0200
Subject: [PATCH] Add (basic implementation of) background for loading images

---
 .../common/messaging/attachments/Attachment.module.scss     | 4 ++++
 src/components/common/messaging/attachments/Attachment.tsx  | 6 ++++++
 2 files changed, 10 insertions(+)

diff --git a/src/components/common/messaging/attachments/Attachment.module.scss b/src/components/common/messaging/attachments/Attachment.module.scss
index 929a2c41..c241c71e 100644
--- a/src/components/common/messaging/attachments/Attachment.module.scss
+++ b/src/components/common/messaging/attachments/Attachment.module.scss
@@ -93,3 +93,7 @@
 .image {
     cursor: pointer;
 }
+
+.loading {
+    background: var(--background);
+}
diff --git a/src/components/common/messaging/attachments/Attachment.tsx b/src/components/common/messaging/attachments/Attachment.tsx
index 06335799..bd831958 100644
--- a/src/components/common/messaging/attachments/Attachment.tsx
+++ b/src/components/common/messaging/attachments/Attachment.tsx
@@ -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")
                         }