diff --git a/src/js/components/Beacon/BeaconNetwork/NetworkSearchResults.tsx b/src/js/components/Beacon/BeaconNetwork/NetworkSearchResults.tsx
index b6396381..cae8a6b2 100644
--- a/src/js/components/Beacon/BeaconNetwork/NetworkSearchResults.tsx
+++ b/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 = (
- <>
+
{hasBeaconNetworkError && Network Error}
+ {!noResponsesYet && isFetchingAtLeastOneResponse && }
{numResultsText(numNonZeroResponses)}
- >
+
);
return (