Fix PDF view loading indicator (#12882)

RocketChat · Dec 10, 2018 · f952a52 · f952a52
1 parent 248c04c
commit f952a52
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 6 deletions.
diff --git a/packages/rocketchat-message-attachments/client/index.js b/packages/rocketchat-message-attachments/client/index.js
@@ -1,3 +1,2 @@
-import './stylesheets/messageAttachments.css';
 import './messageAttachment.html';
 import './messageAttachment';
diff --git a/packages/rocketchat-message-attachments/client/stylesheets/messageAttachments.css b/packages/rocketchat-message-attachments/client/stylesheets/messageAttachments.css
@@ -152,9 +152,11 @@ html.rtl .attachment {
 	& .attachment-pdf-loading {
 		display: none;
 
-		animation: spin 1s linear infinite;
-
 		font-size: 1.5rem;
+
+		svg {
+			animation: spin 1s linear infinite;
+		}
 	}
 
 	& .actions-container {

diff --git a/packages/rocketchat-message-attachments/package.js b/packages/rocketchat-message-attachments/package.js
@@ -14,5 +14,6 @@ Package.onUse(function(api) {
 		'rocketchat:e2e',
 		'rocketchat:ui-message',
 	]);
+	api.addFiles('client/stylesheets/messageAttachments.css', 'client');
 	api.mainModule('client/index.js', 'client');
 });
diff --git a/packages/rocketchat-ui-message/client/message.js b/packages/rocketchat-ui-message/client/message.js
@@ -33,7 +33,8 @@ async function renderPdfToCanvas(canvasId, pdfLink) {
 	const pdfjsLib = await import('pdfjs-dist');
 	pdfjsLib.GlobalWorkerOptions.workerSrc = `${ Meteor.absoluteUrl() }node_modules/pdfjs-dist/build/pdf.worker.js`;
 
-	const loader = document.getElementById('js-loading-${canvasId}');
+	const loader = document.getElementById(`js-loading-${ canvasId }`);
+
 	if (loader) {
 		loader.style.display = 'block';
 	}
@@ -45,10 +46,10 @@ async function renderPdfToCanvas(canvasId, pdfLink) {
 	const context = canvas.getContext('2d');
 	canvas.height = viewport.height;
 	canvas.width = viewport.width;
-	page.render({
+	await page.render({
 		canvasContext: context,
 		viewport,
-	});
+	}).promise;
 
 	if (loader) {
 		loader.style.display = 'none';