image-viewer: lazy-loader

2 files changed, 11 insertions, 2 deletions

diff --git a/static/widgets/image/index.css b/static/widgets/image/index.css
index 730a324..a53bddc 100644
--- a/static/widgets/image/index.css
+++ b/static/widgets/image/index.css
@@ -5,18 +5,22 @@
 	border-radius: var(--border-radius);
 	overflow: none;
 	box-shadow: #223223aa 1px 1px 4px;
+	background: var(--card-background);
 }
 
 #container img {
 	border-radius: var(--border-radius);
 	max-width: 700px;
-	width: 100%;
+	width: calc(100vw - 20px);
 	visibility: hidden;
 	margin-bottom: -5px;
+	height: calc((100vw - 20px) * 0.8);
 }
 
 #container.loaded img {
 	visibility: visible;
+	width: 100%;
+	height: unset;
 }
 
 @keyframes loader {
diff --git a/static/widgets/image/index.js b/static/widgets/image/index.js
index 202494b..4c25988 100644
--- a/static/widgets/image/index.js
+++ b/static/widgets/image/index.js
@@ -46,6 +46,11 @@ export default class Image extends sfw.element.Container {
 	set id(id) {
 		this.#id = id;
 		this.#container.classList.remove('loaded');
-		this.#image.src = `/api/image/load/${id}`;
+	}
+
+	load() {
+		if (!this.#image.src) {
+			this.#image.src = `/api/image/load/${this.#id}`;
+		}
 	}
 }