diff --git a/extensions/image-preview/media/loading-dark.svg b/extensions/image-preview/media/loading-dark.svg
new file mode 100644
index 0000000000000000000000000000000000000000..7dc1ebd8cf045f8bfa4c097fad38ef03057ccb87
--- /dev/null
+++ b/extensions/image-preview/media/loading-dark.svg
@@ -0,0 +1,31 @@
+<?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>
diff --git a/extensions/image-preview/media/loading-hc.svg b/extensions/image-preview/media/loading-hc.svg
new file mode 100644
index 0000000000000000000000000000000000000000..c3633c0ddabee926a9d9c0836395674f01848703
--- /dev/null
+++ b/extensions/image-preview/media/loading-hc.svg
@@ -0,0 +1,31 @@
+<?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>
diff --git a/extensions/image-preview/media/loading.svg b/extensions/image-preview/media/loading.svg
new file mode 100644
index 0000000000000000000000000000000000000000..e762f06d5e6e8c7fb91e5072db4f36342da1c709
--- /dev/null
+++ b/extensions/image-preview/media/loading.svg
@@ -0,0 +1,31 @@
+<?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>
diff --git a/extensions/image-preview/media/main.css b/extensions/image-preview/media/main.css
index f610466a488b6e5f0ed9d228837a688c0769a263..971a641fb079026faf2c71da166e61b53edd5edc 100644
--- 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
index 81f2da7401ea4fa3cd3a6bfab77671b0d67c358f..e58b7e58f36297be1283acd3bc2b663c11133b8c 100644
--- 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
index f9d4885e85a5bac317df7b44a12420c7f41f1cec..b0f6ff4c357854ff586694face4266b3ab872d32 100644
--- 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>`;