better placement of waiting text

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

@@ -41,8 +41,6 @@ import PaginationInfo
   from 'app/components/pagination/PaginationInfo';
 import LoadingIndicator
   from 'app/components/spinners/LoadingIndicator';
-import WaitingText
-  from 'app/components/spinners/WaitingText';
 
 
 const RoutesHeader = ({type}) => {
@@ -60,7 +58,6 @@ const RoutesLoading = () => {
   return (
     <div className={`card routes-view`}>
       <LoadingIndicator />
-      <WaitingText />
     </div>
   );
 };

ui/src/app/components/spinners/WaitingCard.js

@@ -4,7 +4,8 @@ import { useState
        }
   from 'react';
 
-const WaitingText = ({resource = "routes"}) => {
+
+const WaitingCard = ({resource = "routes"}) => {
   const [time, setTime] = useState(0);
 
   useEffect(() => {
@@ -16,27 +17,28 @@ const WaitingText = ({resource = "routes"}) => {
     }
   }, []);
 
+  if (time < 5) {
+    return null;
+  }
+
   return (
-    <div className="routes-loading">
+    <div className="card routes-loading">
       {time >= 5 &&
-        <p><br />&gt; Still loading routes, please be patient.</p>}
+        <p>&gt; Still loading routes, please be patient.</p>}
       {time >= 15 &&
         <p>&gt; This seems to take a while...</p>}
       {time >= 20 &&
         <p>&gt; This usually only happens when there are really many routes!<br />
            &nbsp; Please stand by a bit longer.</p>}
-
       {time >= 30 &&
         <p>&gt; This is taking really long...</p>}
-
       {time >= 40 &&
         <p>&gt; I heard there will be cake if you keep on waiting just a
            bit longer!</p>}
-
       {time >= 60 &&
         <p>&gt; I guess the cake was a lie.</p>}
     </div>
   );
 }
 
-export default WaitingText;
+export default WaitingCard;

ui/src/app/context/routes.js

@@ -35,7 +35,6 @@ export const useRoutesReceived    = () => useContext(RoutesReceivedContext);
 export const useRoutesFiltered    = () => useContext(RoutesFilteredContext);
 export const useRoutesNotExported = () => useContext(RoutesNotExportedContext);
 
-
 // Providers
 
 /**
@@ -192,6 +191,20 @@ export const RoutesNotExportedProvider = createRoutesProvider(
   useFetchNotExportedState,
 );
 
+/**
+ * useRoutesLoading checks if any routes are loading
+ */
+export const useRoutesLoading = () => {
+  const received = useRoutesReceived();
+  const filtered = useRoutesFiltered();
+  const noexport = useRoutesNotExported();
+
+  return (received.requested && received.loading) ||
+    (filtered.requested && filtered.loading) ||
+    (noexport.requested && noexport.loading);
+}
+
+
 /**
  * RouteDetails Context
  */

ui/src/app/pages/RoutesPage.js

@@ -31,6 +31,7 @@ import { RoutesReceivedProvider
        , RoutesFilteredProvider
        , RoutesNotExportedProvider
        , RouteDetailsProvider
+       , useRoutesLoading
        }
   from 'app/context/routes';
 
@@ -46,6 +47,8 @@ import Routes
   from 'app/components/routes/Routes';
 import SearchQueryInput
   from 'app/components/search/SearchQueryInput';
+import WaitingCard
+  from 'app/components/spinners/WaitingCard';
 
 
 const FILTERABLE_COLUMNS = [
@@ -90,6 +93,7 @@ const RoutesPageSearch = () => {
 
 const RoutesPageContent = () => {
   const localRelatedPeers = useLocalRelatedPeers();
+  const isLoading = useRoutesLoading();
 
   let pageClass = "routeservers-page";
   if (localRelatedPeers.length > 1) {
@@ -114,6 +118,8 @@ const RoutesPageContent = () => {
           <div className="card">
             <Status />
           </div>
+          { isLoading && <WaitingCard />}
+
           <RelatedPeersCard />
           { /* 
           <FiltersEditor makeLinkProps={makeLinkProps}