Merge pull request #70 from MichailiK/feature/message/image-loading-background

src/components/common/messaging/attachments/Attachment.module.scss

@@ -92,4 +92,10 @@
 
 .image {
     cursor: pointer;
+    width: 100%;
+    height: 100%;
+
+    &.loading {
+        background: var(--background);
+    }
 }

src/components/common/messaging/attachments/Attachment.tsx

@@ -11,6 +11,7 @@ import AttachmentActions from "./AttachmentActions";
 import { SizedGrid } from "./Grid";
 import Spoiler from "./Spoiler";
 import TextFile from "./TextFile";
+import ImageFile from "./ImageFile";
 
 interface Props {
     attachment: AttachmentI;
@@ -21,7 +22,6 @@ const MAX_ATTACHMENT_WIDTH = 480;
 
 export default function Attachment({ attachment, hasContent }: Props) {
     const client = useContext(AppContext);
-    const { openScreen } = useIntermediate();
     const { filename, metadata } = attachment;
     const [spoiler, setSpoiler] = useState(filename.startsWith("SPOILER_"));
 
@@ -41,18 +41,7 @@ export default function Attachment({ attachment, hasContent }: Props) {
                         [styles.margin]: hasContent,
                         spoiler,
                     })}>
-                    <img
+                    <ImageFile attachment={attachment} />
-                        src={url}
-                        alt={filename}
-                        className={styles.image}
-                        loading="lazy"
-                        onClick={() =>
-                            openScreen({ id: "image_viewer", attachment })
-                        }
-                        onMouseDown={(ev) =>
-                            ev.button === 1 && window.open(url, "_blank")
-                        }
-                    />
                     {spoiler && <Spoiler set={setSpoiler} />}
                 </SizedGrid>
             );

src/components/common/messaging/attachments/ImageFile.tsx

@@ -0,0 +1,49 @@
+import {Attachment} from "revolt-api/types/Autumn";
+
+import styles from "./Attachment.module.scss";
+import classNames from "classnames";
+import {useContext, useState} from "preact/hooks";
+
+import {useIntermediate} from "../../../../context/intermediate/Intermediate";
+import {AppContext} from "../../../../context/revoltjs/RevoltClient";
+
+enum ImageLoadingState
+{
+    Loading,
+    Loaded,
+    Error
+}
+
+interface Props {
+    attachment: Attachment;
+}
+
+export default function ImageFile({ attachment }: Props)
+{
+    const [loading, setLoading] = useState(ImageLoadingState.Loading);
+    const client = useContext(AppContext);
+    const { openScreen } = useIntermediate();
+    const url = client.generateFileURL(attachment)!;
+
+    return <img
+        src={url}
+        alt={attachment.filename}
+        loading="lazy"
+        className={classNames(styles.image, {
+            [styles.loading]: loading !== ImageLoadingState.Loaded
+        })}
+        onClick={() =>
+            openScreen({id: "image_viewer", attachment})
+        }
+        onMouseDown={(ev) =>
+            ev.button === 1 && window.open(url, "_blank")
+        }
+        onLoad={() =>
+            setLoading(ImageLoadingState.Loaded)
+        }
+        onError={() =>
+            setLoading(ImageLoadingState.Error)
+        }
+
+    />
+}