Add a "searching..." indicator to show progress

This commit is contained in:
Oliver Walters 2022-03-29 22:48:54 +11:00
parent 11a6052871
commit f1876ae28b
2 changed files with 17 additions and 0 deletions

View File

@ -75,6 +75,9 @@ function updateSearch() {
searchQueries = []; searchQueries = [];
// Show the "searching" text
$('#offcanvas-search').find('#search-pending').show();
// Search for matching parts // Search for matching parts
searchQueries.push(inventreeGet( searchQueries.push(inventreeGet(
`{% url "api-part-list" %}`, `{% url "api-part-list" %}`,
@ -123,6 +126,11 @@ function updateSearch() {
} }
} }
)); ));
// Wait until all the pending queries are completed
$.when.apply($, searchQueries).done(function() {
$('#offcanvas-search').find('#search-pending').hide();
});
} }
@ -133,6 +141,9 @@ function clearSearchResults() {
// Ensure the 'no results found' element is visible // Ensure the 'no results found' element is visible
panel.find('#search-no-results').show(); panel.find('#search-no-results').show();
// Ensure that the 'searching' element is hidden
panel.find('#search-pending').hide();
// Delete any existing search results // Delete any existing search results
panel.find('#search-results').empty(); panel.find('#search-results').empty();
} }

View File

@ -19,6 +19,12 @@
</div> </div>
<div class="offcanvas-body"> <div class="offcanvas-body">
<div id="search-center"> <div id="search-center">
<p id='search-pending' class='text-muted' display='none'>
<em>{% trans "Searching" %}...</em>
<span class='float-right'>
<span class='fas fa-spinner fa-spin'></span>
</span>
</p>
<p id='search-no-results' class='text-muted'> <p id='search-no-results' class='text-muted'>
<em>{% trans "No search results" %}</em> <em>{% trans "No search results" %}</em>
</p> </p>