feat(web): the home search box reacts the moment Enter is pressed

A search on live takes 7-12 s (/covenant), during which the page gave no
sign anything happened. On Enter the box now pulses, turns read-only and
shows a progress cursor until the next page loads; a second Enter and an
empty box are ignored, and Back restores it. The page at rest is
unchanged (browser suite 0.000% on /).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Author: kckern

apps/web/src/presentation/views/home.ejs

@@ -20,6 +20,18 @@
     border: 1px solid black;
     box-shadow: 0 0 10px #492517;
   }
+  /* Shown the moment Enter is pressed, until the next page arrives (a search can take seconds) */
+  input.searching {
+    color: #777 !important;
+    cursor: progress;
+    background: linear-gradient(90deg, #fff 0%, #efe6dc 50%, #fff 100%);
+    background-size: 200% 100%;
+    animation: searching 1s linear infinite;
+  }
+  @keyframes searching {
+    from { background-position: 100% 0; }
+    to { background-position: -100% 0; }
+  }
   div { font-weight: bold; }
   a.button {
     position: relative;
@@ -89,12 +101,21 @@
       }
       if (e.which == 13) {
         var term = $("#searchbox").val();
+        if ($("#searchbox").hasClass("searching") || !term.trim()) return false;
         if (term.match(/\\d+/g) == null) {
           term = term.trim().replace(/\\s+/gi, ".");
         }
+        $("#searchbox").addClass("searching").prop("readonly", true);
+        document.body.style.cursor = "progress";
         window.location.href = term;
       }
     });
+
+    // Coming back with the Back button restores the page from cache: make the box usable again.
+    $(window).on("pageshow", function () {
+      $("#searchbox").removeClass("searching").prop("readonly", false);
+      document.body.style.cursor = "";
+    });
   });
 </script>
 

apps/web/test/unit/homeView.test.js

@@ -19,3 +19,13 @@ test('the Install Now button is styled as on live (home.php a.button)', async ()
   const decls = rule[1].replace(/\/\*[\s\S]*?\*\//g, '').split(';').map(d => d.replace(/\s+/g, ' ').trim().replace(/\s*:\s*/, ':')).filter(Boolean);
   expect(decls).toEqual(LIVE_BUTTON);
 });
+
+// A search can take seconds; the box must react the moment Enter is pressed (checked in Chromium
+// by hand: class, readonly and progress cursor are set before the next page loads).
+test('the search box shows it is searching on Enter and recovers on Back', async () => {
+  const html = await ejs.renderFile(HOME, { config: {} });
+  expect(html).toMatch(/input\.searching\s*\{[^}]*animation:\s*searching/);
+  expect(html).toContain('$("#searchbox").addClass("searching").prop("readonly", true);');
+  expect(html).toMatch(/hasClass\("searching"\) \|\| !term\.trim\(\)\) return false;/);
+  expect(html).toMatch(/on\("pageshow"[\s\S]*removeClass\("searching"\)/);
+});