Show a spinner if a search is taking too long.

asl_articles/tests/test_articles.py

@@ -216,6 +216,7 @@ def test_delete_article( webdriver, flask_app, dbconn ):
     # start to delete an article, but cancel the operation
     article_name = "Smoke Gets In Your Eyes"
     results = do_search( SEARCH_ALL_ARTICLES )
+    result_names = get_search_result_names( results )
     sr = find_search_result( article_name, results )
     select_sr_menu_option( sr, "delete" )
     check_ask_dialog( ( "Delete this article?", article_name ), "cancel" )
@@ -226,7 +227,7 @@ def test_delete_article( webdriver, flask_app, dbconn ):
 
     # check that the search results are unchanged in the database
     results3 = do_search( SEARCH_ALL_ARTICLES )
-    assert results3 == results
+    assert get_search_result_names( results3 ) == result_names
 
     # delete the article
     sr = find_search_result( article_name, results3 )

asl_articles/tests/test_publications.py

@@ -186,6 +186,7 @@ def test_delete_publication( webdriver, flask_app, dbconn ):
     # start to delete a publication, but cancel the operation
     article_title = "ASL Journal (2)"
     results = do_search( SEARCH_ALL_PUBLICATIONS )
+    result_names = get_search_result_names( results )
     sr = find_search_result( article_title, results )
     select_sr_menu_option( sr, "delete" )
     check_ask_dialog( ( "Delete this publication?", article_title ), "cancel" )
@@ -196,7 +197,7 @@ def test_delete_publication( webdriver, flask_app, dbconn ):
 
     # check that the search results are unchanged in the database
     results3 = do_search( SEARCH_ALL_PUBLICATIONS )
-    assert results3 == results
+    assert get_search_result_names( results3 ) == result_names
 
     # delete the publication
     sr = find_search_result( article_title, results3 )
@@ -351,7 +352,7 @@ def test_parent_publisher( webdriver, flask_app, dbconn ):
 
     # change the publication back to having no publisher
     edit_publication( sr, { "publisher": "(none)" } )
-    sr = wait_for( 2, lambda: check_result( results[0], None ) )
+    sr = wait_for( 2, lambda: check_result( sr, None ) )
 
 # ---------------------------------------------------------------------
 

asl_articles/tests/test_publishers.py

@@ -114,6 +114,7 @@ def test_delete_publisher( webdriver, flask_app, dbconn ):
     # start to delete a publisher, but cancel the operation
     article_name = "Le Franc Tireur"
     results = do_search( SEARCH_ALL_PUBLISHERS )
+    result_names = get_search_result_names( results )
     sr = find_search_result( article_name, results )
     select_sr_menu_option( sr, "delete" )
     check_ask_dialog( ( "Delete this publisher?", article_name ), "cancel" )
@@ -124,7 +125,7 @@ def test_delete_publisher( webdriver, flask_app, dbconn ):
 
     # check that the search results are unchanged in the database
     results3 = do_search( SEARCH_ALL_PUBLISHERS )
-    assert results3 == results
+    assert get_search_result_names( results3 ) == result_names
 
     # delete the publisher
     sr = find_search_result( article_name, results3 )

web/src/App.js

@@ -67,7 +67,7 @@ export default class App extends React.Component
         let content ;
         if ( this.state.startupTasks.length > 0 ) {
             // we are still starting up
-            content = <div id="loading"> <img id="loading" src="/images/loading.gif" alt="Loading..." /></div> ;
+            content = <div id="loading"> <img id="loading" src="/images/loading.gif" alt="Loading..." /> </div> ;
         } else {
             // generate the menu
             const menu = ( <Menu id="app">
@@ -178,6 +178,7 @@ export default class App extends React.Component
     }
     _doSearch( url, args ) {
         // do the search
+        this.setState( { searchResults: "(loading)" } ) ;
         args.no_hilite = this._disableSearchResultHighlighting ;
         axios.post(
             this.makeFlaskUrl( url ), args

web/src/SearchResults.css

@@ -1,5 +1,6 @@
 #search-results { padding: 0 0.25em ; }
 #search-results .no-results { font-style: italic ; }
+#search-results .loading { width: 100% ; height: 100% ; }
 
 .search-result { margin-bottom: 0.5em ; clear: both ; }
 

web/src/SearchResults.js

@@ -16,7 +16,16 @@ export class SearchResults extends React.Component
             results = "ERROR: " + this.props.searchResults.error ;
         else if ( ! this.props.searchResults || this.props.searchResults.length === 0 )
             results = (this.props.seqNo === 0) ? null : <div className="no-results"> No results. </div> ;
-        else {
+        else if ( this.props.searchResults === "(loading)" ) {
+            results = ( <div className="loading">
+                <img id="loading" src="/images/loading.gif" alt="Loading..." style={{display:"none"}} />
+                </div> ) ;
+            setTimeout( function() {
+                let elem = document.getElementById( "loading" ) ;
+                if ( elem )
+                    elem.style.display = "block" ;
+            }, 500 ) ;
+        } else {
             results = [] ;
             this.props.searchResults.forEach( sr => {
                 if ( sr.type === "publisher" ) {