Add spinner while doc is rendering in extension page

Cimbali · Jan 24, 2023 · a50f096 · a50f096
1 parent 69dd6f4
commit a50f096
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 4 deletions.
diff --git a/ext/builder.js b/ext/builder.js
@@ -501,7 +501,7 @@ function setupEvents(doc, win, { url, displayUrl }) {
 
 /* exported renderInDocument */
 function renderInDocument(doc, text, opts) {
-	render(doc, text, opts).then(() => {
+	return render(doc, text, opts).then(() => {
 		setupEvents(doc, window, opts);
 	});
 }
@@ -518,10 +518,14 @@ function renderInIframe(parentDoc, text, { inserter, ...opts }) {
 
 	return new Promise(resolve => {
 		iframe.addEventListener("load", () => resolve(iframe.contentDocument));
-		iframe.srcdoc = '<!DOCTYPE html><html><head><meta charset="utf-8"></head><body></body></html>';
+		iframe.srcdoc = `<!DOCTYPE html><html>
+			<head><meta charset="utf-8"><link rel="stylesheet" type="text/css" href="/ext/spinner.css" /></head>
+			<body><div id="spinner"></div></body>
+		</html>`;
 	}).then(doc => {
+		const spinner = doc.getElementById('spinner');
 		// Render the document with an inserter that adds the markdown inside the iframe
-		render(doc, text, { inserter: n => doc.body.appendChild(n), ...opts }).then(() => {
+		render(doc, text, { inserter: n => doc.body.replaceChild(n, spinner), ...opts }).then(() => {
 			parentDoc.title = doc.title;
 			setupEvents(doc, iframe.contentWindow, opts);
 

diff --git a/ext/spinner.css b/ext/spinner.css
@@ -0,0 +1,41 @@
+/* from loading.io */
+#spinner {
+	display: block;
+	width: 80px;
+	height: 80px;
+	margin: 40vh auto 0;
+}
+
+#spinner:after {
+	content: ' ';
+	display: block;
+	width: 64px;
+	height: 64px;
+	margin: 8px;
+	border-width: 6px;
+	border-style: solid;
+	border-radius: 50%;
+	animation: lds-dual-ring 1.2s linear infinite;
+}
+
+@keyframes lds-dual-ring {
+	0% {
+		transform: rotate(0deg);
+	}
+	100% {
+		transform: rotate(360deg);
+	}
+}
+
+@media (prefers-color-scheme: dark) {
+	#spinner:after {
+		border-color: #fff transparent #fff transparent;
+	}
+}
+
+@media (prefers-color-scheme: light) {
+	#spinner:after {
+		border-color: #000 transparent #000 transparent;
+	}
+}
+
diff --git a/ext/view-md.html b/ext/view-md.html
@@ -3,6 +3,7 @@
 <head>
 	<meta charset="utf-8">
 	<link rel="stylesheet" type="text/css" href="./view-md.css" />
+	<link rel="stylesheet" type="text/css" href="./spinner.css" />
 	<link rel="icon" href="/ext/markdown-mark.svg">
 	<script src="./renderer.js"></script>
 	<script src="./builder.js"></script>

diff --git a/ext/view-md.js b/ext/view-md.js
@@ -17,8 +17,11 @@ function parseURI() {
 const file = parseURI();
 
 function display(allowedUrl, displayUrl) {
+	const spinner = document.body.appendChild(document.createElement('div'));
+	spinner.id = 'spinner';
+
 	return fetch(allowedUrl).then(r => r.text()).then(text => {
-		const inserter = rendered => document.body.appendChild(rendered);
+		const inserter = rendered => document.body.replaceChild(rendered, spinner);
 		webext.storage.sync.get('iframe_embed').then(({ iframe_embed: embed = true }) => {
 			if (embed) {
 				renderInIframe(document, text, { inserter, url: allowedUrl.toString(), displayUrl });
@@ -36,6 +39,8 @@ function display(allowedUrl, displayUrl) {
 		const link = span.appendChild(document.createElement('a'));
 		link.href = displayUrl;
 		link.innerText = displayUrl;
+
+		document.body.removeChild(spinner);
 	})
 }