feat(network): show small spinner when at least one beacon is still f…

…etching

src/js/components/Beacon/BeaconNetwork/NetworkSearchResults.tsx

@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { Tag } from 'antd';
+import { Space, Spin, Tag } from 'antd';
 
 import SearchResultsPane from '@/components/Search/SearchResultsPane';
 import { useBeaconNetwork } from '@/features/beacon/hooks';
@@ -11,6 +11,10 @@ const NetworkSearchResults = () => {
   const { hasBeaconNetworkError } = useBeaconNetwork();
   const { networkResults, beaconResponses } = useBeaconNetwork();
   const responseArray = useMemo(() => Object.values(beaconResponses), [beaconResponses]);
+  const isFetchingAtLeastOneResponse = useMemo(
+    () => responseArray.some((r) => r.isFetchingQueryResponse),
+    [responseArray]
+  );
 
   // filter() creates arrays we don't need, but the arrays are small
   // more readable than equivalent reduce() call
@@ -31,18 +35,21 @@ const NetworkSearchResults = () => {
     return '';
   };
 
+  const noResponsesYet = numNonErrorResponses == 0 && !hasBeaconNetworkError;
+
   // results and optional error tag, for top-right "extra" section of results card
   // currently not possible to have both a network error and results, but this may change in the future
   const resultsExtra = (
-    <>
+    <Space>
       {hasBeaconNetworkError && <Tag color="red">Network Error</Tag>}
+      {!noResponsesYet && isFetchingAtLeastOneResponse && <Spin size="small" />}
       {numResultsText(numNonZeroResponses)}
-    </>
+    </Space>
   );
 
   return (
     <SearchResultsPane
-      isFetchingData={numNonErrorResponses == 0 && !hasBeaconNetworkError}
+      isFetchingData={noResponsesYet}
       results={networkResults}
       resultsTitle="Network Search Results"
       resultsExtra={resultsExtra}