Adding a Rotating Spinner to Simple Search

Archive
1

While the search plugin is executing on the learn2 theme, there isn’t any indication that the search is working or complete. What is the best approach to modify the learn2 theme to add an rotating icon: http://fontawesome.io/examples/#animated to indicate that the search is complete or in process.

Theme in question: https://learn.getgrav.org

Thanks in advance!

2

I was able to figure this out. For those willing to accomplish the same thing, you can add the following javascript to your learn.js in your theme folder:

// Listen for AJAX events and modify the SEARCH icon to a rotating spinner. 
jQuery(document).ajaxStart(function (event, request, settings) {
    jQuery(".searchbox label").replaceWith('<label for="search-by"><i class="fa fa-circle-o-notch fa-spin"></i><span class="sr-only">Loading...</span></label>');
});

jQuery(document).ajaxComplete(function (event, request, settings) {
    jQuery(".searchbox label").replaceWith('<label for="search-by"><i class="fa fa-search"></i></label>');
});
---