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;