From 9c96ccd8886b62a510fc6f81df802c1bcc5c929f Mon Sep 17 00:00:00 2001
From: Annika Hannig <annika@hannig.cc>
Date: Fri, 12 May 2023 14:36:55 +0200
Subject: [PATCH] timeout error handling

---
 ui/src/app/components/routes/EmptyResults.js | 14 ++++++++++++++
 ui/src/app/components/search/SearchStatus.js |  8 +++++++-
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/ui/src/app/components/routes/EmptyResults.js b/ui/src/app/components/routes/EmptyResults.js
index 10d8b19..196f483 100644
--- a/ui/src/app/components/routes/EmptyResults.js
+++ b/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>
diff --git a/ui/src/app/components/search/SearchStatus.js b/ui/src/app/components/search/SearchStatus.js
index 028def7..68676f6 100644
--- a/ui/src/app/components/search/SearchStatus.js
+++ b/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);