From a50f096fb1998598afbdcbad271c1ba80c8ae21e Mon Sep 17 00:00:00 2001 From: Cimbali Date: Tue, 17 Jan 2023 00:56:26 +0100 Subject: [PATCH] Add spinner while doc is rendering in extension page --- ext/builder.js | 10 +++++++--- ext/spinner.css | 41 +++++++++++++++++++++++++++++++++++++++++ ext/view-md.html | 1 + ext/view-md.js | 7 ++++++- 4 files changed, 55 insertions(+), 4 deletions(-) create mode 100644 ext/spinner.css diff --git a/ext/builder.js b/ext/builder.js index 8746086..79a15d8 100755 --- 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 = ''; + iframe.srcdoc = ` + +
+ `; }).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 new file mode 100644 index 0000000..605f118 --- /dev/null +++ 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 index db67835..4b9a777 100644 --- a/ext/view-md.html +++ b/ext/view-md.html @@ -3,6 +3,7 @@ + diff --git a/ext/view-md.js b/ext/view-md.js index 9529032..cdaa1de 100644 --- 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); }) }