diff --git a/src/components/Projects/Projects.tsx b/src/components/Projects/Projects.tsx index eb8ad44bf..41d17186a 100644 --- a/src/components/Projects/Projects.tsx +++ b/src/components/Projects/Projects.tsx @@ -140,6 +140,11 @@ const Projects = ( { ); } + + if ( isLoading && projects.length === 0 ) { + return ; + } + return ( { tabs.shift( ); } + const handleFetchNextPage = useCallback( () => { + if ( currentTabId !== TAB_ID.FEATURED ) { + fetchNextPage(); + } + }, [currentTabId, fetchNextPage] ); + return ( <> { const baseParams = { ...newInputParams, - per_page: 20, + per_page: ITEMS_PER_PAGE, ttl: -1, rule_details: true, fields: { @@ -45,12 +47,20 @@ const useInfiniteProjectsScroll = ( { params: newInputParams, enabled }: object } return searchProjects( params, optsWithAuth ); }, + // TO DO: we need to properly type queryOptions in useAuthenticatedInfiniteQuery + /* eslint-disable consistent-return */ { - getNextPageParam: lastPage => ( lastPage - ? lastPage.page + 1 - : 1 ), + getNextPageParam: lastPage => { + if ( !lastPage ) return undefined; + const totalProjectCount = lastPage.total_results; + const totalFetchedCount = lastPage.page * ITEMS_PER_PAGE; + return totalFetchedCount < totalProjectCount + ? lastPage.page + 1 + : undefined; + }, enabled } + /* eslint-enable consistent-return */ ); const pages = data?.pages;