From a3cd8211f45aa4d4bc7542064bcf4da0b80128f6 Mon Sep 17 00:00:00 2001
From: James Croft <jamz_c@hotmail.co.uk>
Date: Mon, 6 Jun 2022 20:00:30 +0100
Subject: [PATCH] #157 - Added change to prevent form submission on enter with
 page search and added loading spinner

---
 Pages/packages/details.cshtml | 21 ++++++++++++++++-----
 wwwroot/css/site.css          | 19 +++++++++++++++++++
 2 files changed, 35 insertions(+), 5 deletions(-)

diff --git a/Pages/packages/details.cshtml b/Pages/packages/details.cshtml
index 7b4a291..74406c6 100644
--- a/Pages/packages/details.cshtml
+++ b/Pages/packages/details.cshtml
@@ -386,10 +386,13 @@ else
                 <small style="color:#777;">@((package.Content.Sum(x=>x.SizeInBytes)+package.Tools.Sum(x=>x.SizeInBytes)).ToString("#,0")) bytes</small>
             }
 
-            <form class="form-inline" style="margin-top: 0.5em;">
-                <input id="asearch" type="search" class="form-control" placeholder="Search"
-                       autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
-                       style="margin-bottom:1em;" />
+            <form id="asearchform" class="form-inline" style="margin-top: 0.5em;">
+                <div class="form-group has-feedback">
+                    <input id="asearch" type="search" class="form-control" placeholder="Search"
+                           autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
+                           style="margin-bottom: 1em;"/>
+                    <span id="asearchloading" class="loader form-control-feedback hidden"></span>
+                </div>
             </form>
 
             <nav id="anav">
@@ -593,6 +596,8 @@ else
     var packageDescription = @Html.Raw(Json.Serialize(package.Description));
 
     var asearch = document.getElementById("asearch");
+    var asearchloading = document.getElementById("asearchloading");
+    var asearchform = document.getElementById("asearchform");
     var anav = document.getElementById("anav");
     if (asearch && anav) {
         var searchResults = {};
@@ -637,11 +642,13 @@ else
                 ul.appendChild(li);
             });
             anav.hidden = true;
-            asearch.parentElement.appendChild (rhtml);
+            asearchform.appendChild (rhtml);
+            asearchloading.classList.add("hidden");
         }
         function hideResults() {
             if (rhtml) rhtml.remove ();
             anav.hidden = false;
+            asearchloading.classList.add("hidden");
         }
         function queryResults(text, k) {
             var req = new XMLHttpRequest();
@@ -655,6 +662,7 @@ else
             req.send();
         }
         function doSearch() {
+            asearchloading.classList.remove("hidden");
             var text = (asearch.value+"").trim();
             if (text.length == 0) {
                 hideResults();
@@ -674,5 +682,8 @@ else
         asearch.addEventListener("input", function (e) {
             doSearch();
         });
+        asearchform.addEventListener("submit", function(e) {
+            e?.preventDefault();
+        });
     }
 </script>
diff --git a/wwwroot/css/site.css b/wwwroot/css/site.css
index b086475..45a9b00 100644
--- a/wwwroot/css/site.css
+++ b/wwwroot/css/site.css
@@ -237,7 +237,26 @@ a .boxcontents {
     opacity: 65%;
 }
 
+.loader {
+    width: 34px;
+    height: 34px;
+    border: 4px solid #449d44;
+    border-bottom-color: transparent;
+    border-radius: 50%;
+    display: inline-block;
+    box-sizing: border-box;
+    animation: rotation 1s linear infinite;
+}
 
+@keyframes rotation {
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
+} 
 
 @media (prefers-color-scheme: dark) {
     body, .dropdown-menu, ul.dropdown-menu>li>a {