praeclarum#157 - Added change to prevent form submission on enter wit…

…h page search and added loading spinner
jamesmcroft · Jun 6, 2022 · a3cd821 · a3cd821
1 parent 1fc7615
commit a3cd821
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 5 deletions.
diff --git 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
@@ -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 {