Merge branch 'master' into misolori/icon-font-settings

extensions/image-preview/media/loading-dark.svg

+<?xml version='1.0' standalone='no' ?>
+<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='10px' height='10px'>
+	<style>
+    circle {
+      animation: ball 0.6s linear infinite;
+    }
+
+    circle:nth-child(2) { animation-delay: 0.075s; }
+    circle:nth-child(3) { animation-delay: 0.15s; }
+    circle:nth-child(4) { animation-delay: 0.225s; }
+    circle:nth-child(5) { animation-delay: 0.3s; }
+    circle:nth-child(6) { animation-delay: 0.375s; }
+    circle:nth-child(7) { animation-delay: 0.45s; }
+    circle:nth-child(8) { animation-delay: 0.525s; }
+
+    @keyframes ball {
+      from { opacity: 1; }
+      to { opacity: 0.3; }
+    }
+	</style>
+	<g style="fill:grey;">
+		<circle cx='5' cy='1' r='1' style='opacity:0.3;' />
+		<circle cx='7.8284' cy='2.1716' r='1' style='opacity:0.3;' />
+		<circle cx='9' cy='5' r='1' style='opacity:0.3;' />
+		<circle cx='7.8284' cy='7.8284' r='1' style='opacity:0.3;' />
+		<circle cx='5' cy='9' r='1' style='opacity:0.3;' />
+		<circle cx='2.1716' cy='7.8284' r='1' style='opacity:0.3;' />
+		<circle cx='1' cy='5' r='1' style='opacity:0.3;' />
+		<circle cx='2.1716' cy='2.1716' r='1' style='opacity:0.3;' />
+	</g>
+</svg>

extensions/image-preview/media/loading-hc.svg

+<?xml version='1.0' standalone='no' ?>
+<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='10px' height='10px'>
+	<style>
+    circle {
+      animation: ball 0.6s linear infinite;
+    }
+
+    circle:nth-child(2) { animation-delay: 0.075s; }
+    circle:nth-child(3) { animation-delay: 0.15s; }
+    circle:nth-child(4) { animation-delay: 0.225s; }
+    circle:nth-child(5) { animation-delay: 0.3s; }
+    circle:nth-child(6) { animation-delay: 0.375s; }
+    circle:nth-child(7) { animation-delay: 0.45s; }
+    circle:nth-child(8) { animation-delay: 0.525s; }
+
+    @keyframes ball {
+      from { opacity: 1; }
+      to { opacity: 0.3; }
+    }
+	</style>
+	<g style="fill:white;">
+		<circle cx='5' cy='1' r='1' style='opacity:0.3;' />
+		<circle cx='7.8284' cy='2.1716' r='1' style='opacity:0.3;' />
+		<circle cx='9' cy='5' r='1' style='opacity:0.3;' />
+		<circle cx='7.8284' cy='7.8284' r='1' style='opacity:0.3;' />
+		<circle cx='5' cy='9' r='1' style='opacity:0.3;' />
+		<circle cx='2.1716' cy='7.8284' r='1' style='opacity:0.3;' />
+		<circle cx='1' cy='5' r='1' style='opacity:0.3;' />
+		<circle cx='2.1716' cy='2.1716' r='1' style='opacity:0.3;' />
+	</g>
+</svg>

extensions/image-preview/media/loading.svg

+<?xml version='1.0' standalone='no' ?>
+<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='10px' height='10px'>
+	<style>
+    circle {
+      animation: ball 0.6s linear infinite;
+    }
+
+    circle:nth-child(2) { animation-delay: 0.075s; }
+    circle:nth-child(3) { animation-delay: 0.15s; }
+    circle:nth-child(4) { animation-delay: 0.225s; }
+    circle:nth-child(5) { animation-delay: 0.3s; }
+    circle:nth-child(6) { animation-delay: 0.375s; }
+    circle:nth-child(7) { animation-delay: 0.45s; }
+    circle:nth-child(8) { animation-delay: 0.525s; }
+
+    @keyframes ball {
+      from { opacity: 1; }
+      to { opacity: 0.3; }
+    }
+	</style>
+	<g>
+		<circle cx='5' cy='1' r='1' style='opacity:0.3;' />
+		<circle cx='7.8284' cy='2.1716' r='1' style='opacity:0.3;' />
+		<circle cx='9' cy='5' r='1' style='opacity:0.3;' />
+		<circle cx='7.8284' cy='7.8284' r='1' style='opacity:0.3;' />
+		<circle cx='5' cy='9' r='1' style='opacity:0.3;' />
+		<circle cx='2.1716' cy='7.8284' r='1' style='opacity:0.3;' />
+		<circle cx='1' cy='5' r='1' style='opacity:0.3;' />
+		<circle cx='2.1716' cy='2.1716' r='1' style='opacity:0.3;' />
+	</g>
+</svg>

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');
+}

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) {

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>`;