Add loading indicator while image is loading in image preview

Fixes microsoft#81571
mkenigs · Sep 27, 2019 · 408a3eb · 408a3eb
1 parent 6f070c5
commit 408a3eb
Show file tree

Hide file tree

Showing 6 changed files with 130 additions and 12 deletions.
diff --git a/extensions/image-preview/media/loading-dark.svg b/extensions/image-preview/media/loading-dark.svg
diff --git a/extensions/image-preview/media/loading-hc.svg b/extensions/image-preview/media/loading-hc.svg
diff --git a/extensions/image-preview/media/loading.svg b/extensions/image-preview/media/loading.svg
diff --git a/extensions/image-preview/media/main.css b/extensions/image-preview/media/main.css
@@ -62,11 +62,11 @@ body img {
 	margin: auto;
 }
 
-.container.zoom-in {
+.container.ready.zoom-in {
 	cursor: zoom-in;
 }
 
-.container.zoom-out {
+.container.ready.zoom-out {
 	cursor: zoom-out;
 }
 
@@ -76,3 +76,23 @@ body img {
 	text-decoration: underline;
 	margin-left: 5px;
 }
+
+.loading {
+	position: fixed;
+	width: 30px;
+	height: 30px;
+	left: 50%;
+	top: 50%;
+	margin-top: -15px;
+	margin-left: -15px;
+	background-image: url('./loading.svg');
+	background-size: cover;
+}
+
+.vscode-dark .loading {
+	background-image: url('./loading-dark.svg');
+}
+
+.vscode-high-contrast .loading {
+	background-image: url('./loading-hc.svg');
+}
diff --git a/extensions/image-preview/media/main.js b/extensions/image-preview/media/main.js
@@ -69,13 +69,14 @@
 	let scale = initialState.scale;
 	let ctrlPressed = false;
 	let altPressed = false;
+	let hasLoadedImage = false;
 
 	// Elements
 	const container =  /** @type {HTMLElement} */(document.querySelector('body'));
 	const image = document.createElement('img');
 
 	function updateScale(newScale) {
-		if (!image || !image.parentElement) {
+		if (!image || !hasLoadedImage || !image.parentElement) {
 			return;
 		}
 
@@ -125,7 +126,7 @@
 	}
 
 	function firstZoom() {
-		if (!image) {
+		if (!image || !hasLoadedImage) {
 			return;
 		}
 
@@ -134,7 +135,7 @@
 	}
 
 	window.addEventListener('keydown', (/** @type {KeyboardEvent} */ e) => {
-		if (!image) {
+		if (!image || !hasLoadedImage) {
 			return;
 		}
 		ctrlPressed = e.ctrlKey;
@@ -147,7 +148,7 @@
 	});
 
 	window.addEventListener('keyup', (/** @type {KeyboardEvent} */ e) => {
-		if (!image) {
+		if (!image || !hasLoadedImage) {
 			return;
 		}
 
@@ -161,7 +162,7 @@
 	});
 
 	container.addEventListener('click', (/** @type {MouseEvent} */ e) => {
-		if (!image) {
+		if (!image || !hasLoadedImage) {
 			return;
 		}
 
@@ -194,7 +195,7 @@
 	});
 
 	container.addEventListener('wheel', (/** @type {WheelEvent} */ e) => {
-		if (!image) {
+		if (!image || !hasLoadedImage) {
 			return;
 		}
 
@@ -215,7 +216,7 @@
 	});
 
 	window.addEventListener('scroll', () => {
-		if (!image || !image.parentElement || scale === 'fit') {
+		if (!image || !hasLoadedImage || !image.parentElement || scale === 'fit') {
 			return;
 		}
 
@@ -229,9 +230,11 @@
 	container.classList.add('zoom-in');
 
 	image.classList.add('scale-to-fit');
-	image.style.visibility = 'hidden';
 
 	image.addEventListener('load', () => {
+		document.querySelector('.loading').remove();
+		hasLoadedImage = true;
+
 		if (!image) {
 			return;
 		}
@@ -241,7 +244,9 @@
 			value: `${image.naturalWidth}x${image.naturalHeight}`,
 		});
 
-		image.style.visibility = 'visible';
+		container.classList.add('ready');
+		document.body.append(image);
+
 		updateScale(scale);
 
 		if (initialState.scale !== 'fit') {
@@ -250,7 +255,6 @@
 	});
 
 	image.src = decodeURI(settings.src);
-	document.body.append(image);
 
 	window.addEventListener('message', e => {
 		switch (e.data.type) {

diff --git a/extensions/image-preview/src/preview.ts b/extensions/image-preview/src/preview.ts
@@ -96,6 +96,7 @@ export class Preview extends Disposable {
 	<meta id="image-preview-settings" data-settings="${escapeAttribute(JSON.stringify(settings))}">
 </head>
 <body class="container image scale-to-fit">
+	<div class='loading'></div>
 	<script src="${escapeAttribute(this.extensionResource('/media/main.js'))}"></script>
 </body>
 </html>`;