Add a spinner when waiting for image preview to load.

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

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

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;