allow images to upload and sort if according to their datetime

2 files changed, 11 insertions, 1 deletions

diff --git a/static/pages/image-viewer/index.css b/static/pages/image-viewer/index.css
index 6f53333..a1a9b76 100644
--- a/static/pages/image-viewer/index.css
+++ b/static/pages/image-viewer/index.css
@@ -15,3 +15,7 @@
 	border-radius: var(--border-radius);
 	box-shadow: #223223aa 1px 1px 4px;
 }
+
+#container img.hidden {
+	filter: brightness(0) invert();
+}
diff --git a/static/pages/image-viewer/index.js b/static/pages/image-viewer/index.js
index f65c12b..d28b3e1 100644
--- a/static/pages/image-viewer/index.js
+++ b/static/pages/image-viewer/index.js
@@ -15,7 +15,13 @@ export default class ImageViewer extends sfw.element.Container {
 	}
 
 	add(url) {
-		this.#container.append(Img.new({ src: url }));
+		let image;
+		this.#container.append(
+			image = Img.new({
+				className: 'hidden',
+				src: url,
+				onload: () => image.classList.remove('hidden')
+			}));
 	}
 
 	clear() {