Merge pull request #3297 from inaturalist/mob-1072-fix-issues-with-loading-projects

Mob 1072 fix issues with loading projects

src/components/Projects/Projects.tsx

@@ -140,6 +140,11 @@ const Projects = ( {
         </View>
       );
     }
+
+    if ( isLoading && projects.length === 0 ) {
+      return <ActivityIndicator size={50} />;
+    }
+
     return (
       <ProjectList
         projects={projects}

src/components/Projects/ProjectsContainer.tsx

@@ -1,5 +1,5 @@
 import _ from "lodash";
-import React, { useState } from "react";
+import React, { useCallback, useState } from "react";
 import {
   useCurrentUser,
   useLocationPermission,
@@ -93,11 +93,17 @@ const ProjectsContainer = ( ) => {
     tabs.shift( );
   }
 
+  const handleFetchNextPage = useCallback( () => {
+    if ( currentTabId !== TAB_ID.FEATURED ) {
+      fetchNextPage();
+    }
+  }, [currentTabId, fetchNextPage] );
+
   return (
     <>
       <Projects
         currentTabId={currentTabId}
-        fetchNextPage={fetchNextPage}
+        fetchNextPage={handleFetchNextPage}
         hasPermissions={hasPermissions}
         isFetchingNextPage={isFetchingNextPage}
         isLoading={isFetching}

src/components/Projects/hooks/useInfiniteProjectsScroll.ts

@@ -4,10 +4,12 @@ import {
   useAuthenticatedInfiniteQuery
 } from "sharedHooks";
 
+const ITEMS_PER_PAGE = 20;
+
 const useInfiniteProjectsScroll = ( { params: newInputParams, enabled }: object ): object => {
   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;