Merge pull request #2070 from 10up/feature/1610

Add a class to the search form when autosuggestions are loading. Addresses #1610.

assets/js/autosuggest.js

@@ -351,6 +351,22 @@ function checkForOrderedPosts(hits, searchTerm) {
 	return hits;
 }
 
+/**
+ * Add class to the form element while suggestions are being loaded
+ *
+ * @param {boolean} isLoading - whether suggestions are loading
+ * @param {Node} input - search input field
+ */
+function setFormIsLoading(isLoading, input) {
+	const form = input.closest('form');
+
+	if (isLoading) {
+		form.classList.add('is-loading');
+	} else {
+		form.classList.remove('is-loading');
+	}
+}
+
 /**
  * init method called if the epas endpoint is defined
  */
@@ -549,6 +565,8 @@ function init() {
 		}
 
 		if (searchText.length >= 2) {
+			setFormIsLoading(true, input);
+
 			const query = buildSearchQuery(searchText, placeholder, queryJSON);
 
 			// fetch the results
@@ -566,6 +584,8 @@ function init() {
 			} else {
 				hideAutosuggestBox();
 			}
+
+			setFormIsLoading(false, input);
 		} else if (searchText.length === 0) {
 			hideAutosuggestBox();
 		}