diff --git a/static/index.html b/static/index.html index 22b214f..d9c3e9d 100644 --- a/static/index.html +++ b/static/index.html @@ -97,7 +97,9 @@
diff --git a/static/main.js b/static/main.js index eb15edd..e2f3b26 100644 --- a/static/main.js +++ b/static/main.js @@ -168,13 +168,31 @@ function prepareIssue() { }); } +function startLoader() { + var button = document.getElementById("print-button"); + var loaders = button.getElementsByClassName("loader"); + for (let loader of loaders) { + loader.style.display = "inline-block"; + } + button.disabled = true; +} + +function stopLoader() { + var button = document.getElementById("print-button"); + var loaders = button.getElementsByClassName("loader"); + for (let loader of loaders) { + loader.style.display = "none"; + } + button.disabled = false; +} + async function generatePDF() { - document.getElementById("print-button").disabled = true; + startLoader(); var resp; var respJson; - const resourceUrl = "/api/issue/"; - //const resourceUrl = "http://127.0.0.1:8001/issue/"; + //const resourceUrl = "/api/issue/"; + const resourceUrl = "http://127.0.0.1:8001/issue/"; try { resp = await fetch(resourceUrl, { @@ -208,5 +226,5 @@ async function generatePDF() { console.error("Failed to generate PDF"); } - document.getElementById("print-button").disabled = false; + stopLoader(); } diff --git a/static/style.css b/static/style.css index 01ab7ed..fdaf90c 100644 --- a/static/style.css +++ b/static/style.css @@ -99,3 +99,14 @@ button.inline-button { #image-list span { overflow-wrap: break-word; } + +/* Loading animation */ +@keyframes spin { + from {transform: rotateZ(0deg);} + to {transform: rotateZ(360deg);} +} +.loader { + display: none; + animation: spin 5s linear infinite; + font-size: 2rem; +}