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 (