timeout error handling

ui/src/app/components/routes/EmptyResults.js

@@ -6,6 +6,8 @@ import { useRoutesReceived
        , useRoutesNotExported 
        }
   from 'app/context/routes';
+import { isTimeoutError }
+  from 'app/context/errors';
 
 
 /**
@@ -51,6 +53,18 @@ const EmptyResults = () => {
  
   // Maybe this has something to do with a filter
   if (!hasContent && hasQuery && isRequested) {
+      if (isTimeoutError(received?.error)) {
+        return (
+          <div className="card info-result-empty">
+            <h4 className="text-danger">The query took too long to process.</h4>
+            <p>
+              Unfortunately, it looks like the query matches a lot of routes.<br />
+              Please try to refine your query to be more specific.
+            </p>
+          </div>
+        );
+      }
+
       return (
         <div className="card info-result-empty">
           <h4>No routes  matching your query.</h4>

ui/src/app/components/search/SearchStatus.js

@@ -6,7 +6,9 @@ import { useRouteServersMap }
   from 'app/context/route-servers';
 import { useApiStatus }
   from 'app/context/api-status';
-import { useRoutesLoading }
+import { useRoutesLoading
+       , useRoutesReceived 
+       }
   from 'app/context/routes';
 import { useSearchStatus }
   from 'app/context/search';
@@ -107,6 +109,7 @@ const RefreshState = () => {
 }
 
 const SearchStatus = () => {
+  const {error} = useRoutesReceived();
   const isLoading = useRoutesLoading();
   const { queryDurationMs
         , totalReceived 
@@ -117,6 +120,9 @@ const SearchStatus = () => {
   if (isLoading) {
     return null;
   }
+  if (error) {
+    return null;
+  }
 
   const queryDuration = queryDurationMs && queryDurationMs.toFixed(2);