diff --git a/services/web/app/views/project/editor/binary-file.jade b/services/web/app/views/project/editor/binary-file.jade
index eaaa6e6c65..d0effce668 100644
--- a/services/web/app/views/project/editor/binary-file.jade
+++ b/services/web/app/views/project/editor/binary-file.jade
@@ -7,16 +7,20 @@ div.binary-file.full-size(
 		ng-show="!failedLoad"
 		ng-src="/project/{{ project_id }}/file/{{ openFile.id }}"
 		ng-if="['png', 'jpg', 'jpeg', 'gif'].indexOf(extension(openFile)) > -1"
+		ng-class="{'img-preview': !imgLoaded}"
 		onerror="sl_binaryFilePreviewError()"
 		onabort="sl_binaryFilePreviewError()"
+		onload="sl_binaryFilePreviewLoaded()"
 	)
 
 	img(
 		ng-show="!failedLoad"
 		ng-src="/project/{{ project_id }}/file/{{ openFile.id }}?format=png"
 		ng-if="['pdf', 'eps'].indexOf(extension(openFile)) > -1"
+		ng-class="{'img-preview': !imgLoaded}"
 		onerror="sl_binaryFilePreviewError()"
 		onabort="sl_binaryFilePreviewError()"
+		onload="sl_binaryFilePreviewLoaded()"
 	)
 	
 	div(ng-if="(['bib'].indexOf(extension(openFile)) > -1) && !bibtexPreview.error")
diff --git a/services/web/public/coffee/ide/binary-files/controllers/BinaryFileController.coffee b/services/web/public/coffee/ide/binary-files/controllers/BinaryFileController.coffee
index 7dceeff965..b1457532b5 100644
--- a/services/web/public/coffee/ide/binary-files/controllers/BinaryFileController.coffee
+++ b/services/web/public/coffee/ide/binary-files/controllers/BinaryFileController.coffee
@@ -11,12 +11,20 @@ define [
 			error: false
 			data: null
 
+		# Callback fired when the `img` tag fails to load,
+		# `failedLoad` used to show the "No Preview" message
 		$scope.failedLoad = false
-
 		window.sl_binaryFilePreviewError = () =>
 			$scope.failedLoad = true
 			$scope.$apply()
 
+		# Callback fired when the `img` tag is done loading,
+		# `imgLoaded` is used to show the spinner gif while loading
+		$scope.imgLoaded = false
+		window.sl_binaryFilePreviewLoaded = () =>
+			$scope.imgLoaded = true
+			$scope.$apply()
+
 		$scope.extension = (file) ->
 			return file.name.split(".").pop()?.toLowerCase()
 
diff --git a/services/web/public/img/spinner.gif b/services/web/public/img/spinner.gif
new file mode 100644
index 0000000000..22220a2214
Binary files /dev/null and b/services/web/public/img/spinner.gif differ
diff --git a/services/web/public/stylesheets/app/editor/binary-file.less b/services/web/public/stylesheets/app/editor/binary-file.less
index 7b42bb9b26..04bc62931a 100644
--- a/services/web/public/stylesheets/app/editor/binary-file.less
+++ b/services/web/public/stylesheets/app/editor/binary-file.less
@@ -13,6 +13,11 @@
 		.box-shadow(0 2px 3px @gray;);
 		background-color: white;
 	}
+	.img-preview {
+		background: url('/img/spinner.gif') no-repeat;
+		min-width: 200px;
+		min-height: 200px;
+	}
 	p.no-preview {
 		font-size: 24px;
 		color: @gray;