From ed1676bac1bbe06143103fd1ed29c11f39b4ae60 Mon Sep 17 00:00:00 2001
From: Aljaz S <me@aljaxus.eu>
Date: Tue, 23 Nov 2021 18:27:51 +0100
Subject: [PATCH] improve user experience in form

preload QR image before setting it - prevent flickering
remove "update" button, listen to input events on input fields
prevent constant updates by debouncing the updateQR call
---
 src/views/form.ejs | 27 +++++++++++++++++++--------
 1 file changed, 19 insertions(+), 8 deletions(-)

diff --git a/src/views/form.ejs b/src/views/form.ejs
index a826c3f..17e5896 100644
--- a/src/views/form.ejs
+++ b/src/views/form.ejs
@@ -30,13 +30,11 @@ div {
     row-gap: .5rem;
     column-gap: 1rem;
 }
-.form > div:last-child {
-    grid-column-end: -1;
-}
 .code {
     background-size: contain;
     background-position: center center;
     background-repeat: no-repeat;
+    background-image: url("/public/invalid-content.png");
     margin: 2rem;
 }
 .card {
@@ -81,18 +79,26 @@ div {
                     <input value="<%= val %>" <%= readonly %> type="<%= i.t %>" placeholder="<%= i.p %>" name="<%= i.n %>">
                 </div>
             <% } %>
-            <div>
+            <!-- <div>
                 <input type="submit" value="Update details" id="update-details">
-            </div>
+            </div> -->
         </div>
     </div>
 </body>
 <script>
-const btn = document.getElementById("update-details")
+const inputs = document.getElementsByTagName("input")
 const qrcode = document.getElementById("qrcode")
 function val (name) {
     return document.getElementsByName(name)?.[0]?.value || ""
 }
+let debounce = null
+function updateQRdeb () {
+    clearTimeout(debounce)
+    debounce = setTimeout(() => {
+        clearTimeout(debounce)
+        updateQR()
+    }, 500);
+}
 function updateQR (e) {
     const qstring = [
         ["client_name", val("client-name")],
@@ -107,9 +113,14 @@ function updateQR (e) {
         ["issuer_address", val("issuer-address")],
         ["issuer_city", val("issuer-city")],
     ].map(v => `${v[0]}=${v[1]}`).join("&")
-    qrcode.style.setProperty('background-image', `url("/api/qrcode?${qstring}"), url("/public/invalid-content.png")`)
+    const newurl = `/api/qrcode?${qstring}`
+    const preloadImg = new Image();
+    preloadImg.addEventListener("load", () => qrcode.style.setProperty('background-image', `url("${newurl}"), url("/public/invalid-content.png")`))
+    preloadImg.src=newurl;
+}
+for (el of inputs) {
+    el.addEventListener("input", updateQRdeb)
 }
-btn.addEventListener("click", updateQR)
 
 updateQR()
 </script>