diff --git a/ui/marketplace/useMarketplace.tsx b/ui/marketplace/useMarketplace.tsx index 8e4b793aa1..1a67d6d791 100644 --- a/ui/marketplace/useMarketplace.tsx +++ b/ui/marketplace/useMarketplace.tsx @@ -1,4 +1,3 @@ -import _pickBy from 'lodash/pickBy'; import { useRouter } from 'next/router'; import React from 'react'; @@ -109,24 +108,38 @@ export default function useMarketplace() { }, [ isPlaceholderData ]); React.useEffect(() => { - const query = _pickBy({ - category: selectedCategoryId === MarketplaceCategory.ALL ? undefined : selectedCategoryId, - filter: debouncedFilterQuery, - }, Boolean); + if (isPlaceholderData) { + return; + } + + const { query } = router; + const newQuery = { ...query }; + + if (selectedCategoryId !== MarketplaceCategory.ALL) { + newQuery.category = selectedCategoryId; + } else { + delete newQuery.category; + } + + if (debouncedFilterQuery) { + newQuery.filter = debouncedFilterQuery; + } else { + delete newQuery.filter; + } if (debouncedFilterQuery.length > 0) { mixpanel.logEvent(mixpanel.EventTypes.LOCAL_SEARCH, { Source: 'Marketplace', 'Search query': debouncedFilterQuery }); } router.replace( - { pathname: '/apps', query }, + { pathname: '/apps', query: newQuery }, undefined, { shallow: true }, ); // omit router in the deps because router.push() somehow modifies it // and we get infinite re-renders then // eslint-disable-next-line react-hooks/exhaustive-deps - }, [ debouncedFilterQuery, selectedCategoryId ]); + }, [ debouncedFilterQuery, selectedCategoryId, isPlaceholderData ]); return React.useMemo(() => ({ selectedCategoryId, diff --git a/ui/marketplace/useMarketplaceApps.tsx b/ui/marketplace/useMarketplaceApps.tsx index 7d6730046c..829d807fde 100644 --- a/ui/marketplace/useMarketplaceApps.tsx +++ b/ui/marketplace/useMarketplaceApps.tsx @@ -62,6 +62,7 @@ export default function useMarketplaceApps( const { data: securityReports, isPlaceholderData: isSecurityReportsPlaceholderData } = useSecurityReports(); + const [ sorting, setSorting ] = React.useState(); // Set the value only 1 time to avoid unnecessary useQuery calls and re-rendering of all applications const [ snapshotFavoriteApps, setSnapshotFavoriteApps ] = React.useState | undefined>(); const isInitialSetup = React.useRef(true); @@ -73,7 +74,9 @@ export default function useMarketplaceApps( } }, [ isFavoriteAppsLoaded, favoriteApps ]); - const { isPlaceholderData, isError, error, data } = useQuery, Array>({ + const { + isPlaceholderData: isAppsPlaceholderData, isError, error, data, + } = useQuery, Array>({ queryKey: [ 'marketplace-dapps', snapshotFavoriteApps ], queryFn: async() => { if (!feature.isEnabled) { @@ -90,7 +93,7 @@ export default function useMarketplaceApps( enabled: feature.isEnabled && Boolean(snapshotFavoriteApps), }); - const [ sorting, setSorting ] = React.useState(); + const isPlaceholderData = isAppsPlaceholderData || isSecurityReportsPlaceholderData; const appsWithSecurityReportsAndRating = React.useMemo(() => data?.map((app) => ({ @@ -101,6 +104,10 @@ export default function useMarketplaceApps( [ data, securityReports, ratings ]); const displayedApps = React.useMemo(() => { + if (isPlaceholderData) { + return appsWithSecurityReportsAndRating || []; + } + return appsWithSecurityReportsAndRating ?.filter(app => isAppNameMatches(filter, app) && isAppCategoryMatches(selectedCategoryId, app, favoriteApps)) .sort((a, b) => { @@ -112,14 +119,14 @@ export default function useMarketplaceApps( } return 0; }) || []; - }, [ selectedCategoryId, appsWithSecurityReportsAndRating, filter, favoriteApps, sorting ]); + }, [ selectedCategoryId, appsWithSecurityReportsAndRating, filter, favoriteApps, sorting, isPlaceholderData ]); return React.useMemo(() => ({ data, displayedApps, error, isError, - isPlaceholderData: isPlaceholderData || isSecurityReportsPlaceholderData, + isPlaceholderData, setSorting, }), [ data, @@ -127,7 +134,6 @@ export default function useMarketplaceApps( error, isError, isPlaceholderData, - isSecurityReportsPlaceholderData, setSorting, ]); } diff --git a/ui/shared/EmptySearchResult.tsx b/ui/shared/EmptySearchResult.tsx index 93433c17c7..ae4db4d8db 100644 --- a/ui/shared/EmptySearchResult.tsx +++ b/ui/shared/EmptySearchResult.tsx @@ -1,4 +1,4 @@ -import { Box, Heading, Text, Icon } from '@chakra-ui/react'; +import { Box, Heading, Icon } from '@chakra-ui/react'; import React from 'react'; // This icon doesn't work properly when it is in the sprite @@ -30,9 +30,9 @@ const EmptySearchResult = ({ text }: Props) => { No results - + { text } - + ); };