fix: limit and spinning of search icon (#310)

.github/workflows/ci_cd.yml

@@ -83,7 +83,7 @@ jobs:
       fail-fast: false
       matrix:
         os: [ubuntu-latest, windows-latest, macos-latest]
-        python-version: ['3.8', '3.9', '3.10', '3.11']
+        python-version: ['3.9', '3.10', '3.11', '3.12']
         should-release: 
           - ${{ github.event_name == 'push' && contains(github.ref, 'refs/tags') }}
         exclude:
@@ -94,7 +94,6 @@ jobs:
         uses: ansys/actions/build-wheelhouse@v4
         with:
           library-name: ${{ env.PACKAGE_NAME }}
-          library-namespace: ${{ env.PACKAGE_NAMESPACE }}
           operating-system: ${{ matrix.os }}
           python-version: ${{ matrix.python-version }}
 

pyproject.toml

@@ -8,7 +8,7 @@ name = "ansys-sphinx-theme"
 version = "0.13.dev0"
 description = "A theme devised by ANSYS, Inc. for Sphinx documentation."
 readme = "README.rst"
-requires-python = ">=3.8,<4"
+requires-python = ">=3.9,<4"
 license = {file = "LICENSE"}
 authors = [
     {name = "ANSYS, Inc.", email = "[email protected]"},

src/ansys_sphinx_theme/theme/ansys_sphinx_theme/components/search-field.html

@@ -9,6 +9,7 @@
   action="{{ pathto('search') }}"
   method="get"
 >
+  <i class="fa fa-search" aria-hidden="true" id="search-icon"></i>
   <input
     type="search"
     placeholder="Search"
@@ -31,7 +32,6 @@
     {% endfor %}
   </select>
   {% endif %}
-  <i class="fa-solid fa-magnifying-glass"></i>
   <!-- Include the MeiliSearch JavaScript library for the search bar -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script>
 

src/ansys_sphinx_theme/theme/ansys_sphinx_theme/static/css/meilisearch.css

@@ -82,7 +82,7 @@ div[data-ds-theme] .searchbox input {
 .container {
   display: flex;
   justify-content: center;
-  align-items: center;
+  align-items: right;
 }
 
 div[data-ds-theme] .meilisearch-autocomplete {
@@ -92,23 +92,12 @@ div[data-ds-theme] .meilisearch-autocomplete {
 
 #search-bar-input {
   background-color: var(--pst-color-background);
-  border: 1px solid var(--pst-color-border);
-  border-radius: 0.25rem;
   color: var(--pst-color-text-base);
   font-size: var(--pst-font-size-icon);
   position: relative;
-  padding-left: 3rem;
-}
-
-.meilisearch-autocomplete::before {
-  content: "\f002";
-  font-family: "Font Awesome 6 Free";
-  position: absolute;
-  left: 8px;
-  top: 50%;
-  transform: translateY(-50%);
-  font-size: 1rem;
-  color: var(--pst-color-border);
+  padding-left: 1rem;
+  outline-color: var(--pst-color-border);
+  margin-left: 1rem;
 }
 
 .index-select {
@@ -197,4 +186,9 @@ div[data-ds-theme]
 
 .bd-search {
   margin-bottom: 200px;
+  gap: 0em;
+  border: 0px solid var(--pst-color-border);
+}
+#search-icon {
+  font-size: 1.5rem;
 }

src/ansys_sphinx_theme/theme/ansys_sphinx_theme/static/js/meilisearch_theme_wrap.js

@@ -8,19 +8,49 @@ require.config({
 require(["docsSearchBar"], function (docsSearchBar) {
   document.body.style.overflow = "hidden !important";
   // Initialize the MeiliSearch bar with the given API key and host
-  // inspect the first value of index UID as default
-
   var theSearchBar = docsSearchBar({
     hostUrl: HOST_URL,
     apiKey: API_KEY,
     indexUid: indexUid,
     inputSelector: "#search-bar-input",
     debug: true, // Set debug to true if you want to inspect the dropdown
     meilisearchOptions: {
-      limit: 1000,
+      limit: 10,
     },
   });
 
+  // Function to show the magnifier icon
+  function showMagnifierIcon() {
+    var searchIcon = document.getElementById("search-icon");
+    searchIcon.classList.remove("fa-spinner", "fa-spin"); // Remove spinner classes
+    searchIcon.classList.add("fa-magnifying-glass"); // Add magnifier icon class
+  }
+
+  // Function to show the spinner icon
+  function showSpinnerIcon() {
+    var searchIcon = document.getElementById("search-icon");
+    if (searchIcon) {
+      searchIcon.classList.remove("fa-magnifying-glass"); // Remove magnifier icon class
+      searchIcon.classList.add("fa-spinner", "fa-spin"); // Add spinner classes
+    }
+  }
+
+  document
+    .getElementById("search-bar-input")
+    .addEventListener("input", function () {
+      const inputValue = this.value.trim(); // Trim whitespace from input value
+      // Show the spinner icon only when there is input and no suggestions
+      if (
+        inputValue &&
+        document.querySelectorAll(".dsb-suggestion").length === 0
+      ) {
+        showSpinnerIcon();
+      } else {
+        // Hide the spinner icon when there are suggestions
+        showMagnifierIcon();
+      }
+    });
+
   // Listen for changes in the dropdown selector and update the index uid and suggestion accordingly
   document
     .getElementById("indexUidSelector")
@@ -29,22 +59,4 @@ require(["docsSearchBar"], function (docsSearchBar) {
       theSearchBar.suggestionIndexUid = this.value;
       theSearchBar.autocomplete.autocomplete.setVal("");
     });
-
-  // Listen for changes in the search bar input and update the suggestion accordingly
-  document
-    .getElementById("search-bar-input")
-    .addEventListener("change", function () {
-      theSearchBar.suggestionIndexUid =
-        document.getElementById("indexUidSelector").value;
-    });
-
-  // Set the focus on the search bar input
-  document.getElementById("searchbar").focus();
-
-  // Set the focus on the dropdown selector
-  document
-    .getElementById("searchbar")
-    .addEventListener("indexUidSelector", function () {
-      theSearchBar.autocomplete.autocomplete.close();
-    });
 });