fix: project cards loading (#2079)

* fix: /projects page loading * fix: more projects loading * fix: featured projects loading * fix: home page classes loading
regen-network · Sep 7, 2023 · 57ff309 · 57ff309
1 parent 14bb65c
commit 57ff309
Show file tree

Hide file tree

Showing 9 changed files with 79 additions and 33 deletions.
diff --git a/web-marketplace/src/components/organisms/ProjectCardsSection/ProjectCardsSection.tsx b/web-marketplace/src/components/organisms/ProjectCardsSection/ProjectCardsSection.tsx
@@ -39,7 +39,7 @@ export function ProjectCardsSection({
 }: Props): JSX.Element {
   const { classes } = useSectionStyles();
   const { track } = useTracker();
-  const { data: sanitySoldOutProjects } = useQuery(
+  const { data: sanitySoldOutProjects, isFetching } = useQuery(
     getSoldOutProjectsQuery({ sanityClient, enabled: !!sanityClient }),
   );
   const soldOutProjectsIds = useAllSoldOutProjectsIds({
@@ -55,7 +55,7 @@ export function ProjectCardsSection({
       {body && <BlockContentBody body={body} />}
 
       <WithLoader
-        isLoading={!!loading}
+        isLoading={!!loading || isFetching}
         sx={{ width: '100%', display: 'flex', justifyContent: 'center' }}
       >
         <CardsGridContainer cardsCount={projects.length}>

diff --git a/web-marketplace/src/components/templates/ProjectDetails/ProjectDetails.MoreProjects.tsx b/web-marketplace/src/components/templates/ProjectDetails/ProjectDetails.MoreProjects.tsx
@@ -13,7 +13,9 @@ import useMoreProjects from './hooks/useMoreProjects';
 
 export function MoreProjects(): JSX.Element {
   const { projectId } = useParams();
-  const projects = useMoreProjects(projectId as string);
+  const { projectsWithOrderData, loading } = useMoreProjects(
+    projectId as string,
+  );
 
   const [selectedProject, setSelectedProject] =
     useState<ProjectWithOrderData | null>(null);
@@ -27,7 +29,8 @@ export function MoreProjects(): JSX.Element {
     >
       <ProjectCardsSection
         title="More Projects"
-        projects={projects}
+        projects={projectsWithOrderData}
+        loading={loading}
         onButtonClick={({ project }) => {
           setSelectedProject(project);
           setIsBuyFlowStarted(true);

diff --git a/web-marketplace/src/components/templates/ProjectDetails/hooks/useMoreProjects.ts b/web-marketplace/src/components/templates/ProjectDetails/hooks/useMoreProjects.ts
@@ -1,16 +1,13 @@
-import { ProjectWithOrderData } from 'pages/Projects/Projects.types';
 import { useProjectsWithOrders } from 'hooks/projects/useProjectsWithOrders';
 
 const PROJECTS_LIMIT = 3;
 
-export default function useMoreProjects(
-  projectId: string,
-): ProjectWithOrderData[] {
-  const { projectsWithOrderData } = useProjectsWithOrders({
+export default function useMoreProjects(projectId: string) {
+  const { projectsWithOrderData, loading } = useProjectsWithOrders({
     limit: PROJECTS_LIMIT,
     random: true,
     skippedProjectId: projectId,
   });
 
-  return projectsWithOrderData;
+  return { projectsWithOrderData, loading };
 }
diff --git a/web-marketplace/src/hooks/projects/useProjectsWithOrders.ts b/web-marketplace/src/hooks/projects/useProjectsWithOrders.ts
@@ -88,7 +88,7 @@ export function useProjectsWithOrders({
       }),
     );
 
-  const { data: sellOrders } = useQuery(
+  const { data: sellOrders, isFetching: isLoadingSellOrders } = useQuery(
     getSellOrdersExtendedQuery({
       enabled: !!marketplaceClient,
       client: marketplaceClient,
@@ -98,9 +98,10 @@ export function useProjectsWithOrders({
   );
 
   // AllCreditClasses
-  const { data: creditClassData } = useQuery(
-    getAllSanityCreditClassesQuery({ sanityClient, enabled: !!sanityClient }),
-  );
+  const { data: creditClassData, isFetching: isLoadingSanityCreditClasses } =
+    useQuery(
+      getAllSanityCreditClassesQuery({ sanityClient, enabled: !!sanityClient }),
+    );
 
   /* Normalization/Filtering/Sorting */
 
@@ -174,6 +175,9 @@ export function useProjectsWithOrders({
   const projectsMetadata = projectsMetadatasResults.map(
     queryResult => queryResult.data,
   );
+  const projectsMetadataLoading = projectsMetadatasResults.some(
+    res => res.isFetching,
+  );
 
   const offChainProjectResults = useQueries({
     queries: sortedProjects.map(project =>
@@ -187,6 +191,9 @@ export function useProjectsWithOrders({
   const projectPagesMetadata = offChainProjectResults.map(
     queryResult => queryResult.data?.data.projectByOnChainId?.metadata,
   );
+  const offChainProjectLoading = offChainProjectResults.some(
+    res => res.isFetching,
+  );
 
   const programParties = offChainProjectResults.map(
     queryResult =>
@@ -195,7 +202,7 @@ export function useProjectsWithOrders({
   );
 
   // Credit Classes and their metadata
-  const { classesMetadata } = useClassesWithMetadata(
+  const { classesMetadata, isClassesMetadataLoading } = useClassesWithMetadata(
     sortedProjects.map(project => project?.creditClassId),
   );
 
@@ -216,7 +223,15 @@ export function useProjectsWithOrders({
   return {
     projectsWithOrderData: projectsWithMetadata,
     projectsCount: projectsFilteredByCreditClass?.length,
-    loading: isLoadingProjects || isLoadingProjectsByClass || isLoadingProject,
+    loading:
+      isLoadingProjects ||
+      isLoadingProjectsByClass ||
+      isLoadingSellOrders ||
+      isLoadingSanityCreditClasses ||
+      isLoadingProject ||
+      isClassesMetadataLoading ||
+      projectsMetadataLoading ||
+      offChainProjectLoading,
     hasCommunityProjects,
   };
 }
diff --git a/web-marketplace/src/pages/Home/Home.tsx b/web-marketplace/src/pages/Home/Home.tsx
@@ -13,6 +13,7 @@ import { SKIPPED_CLASS_ID } from 'lib/env';
 import { getAllHomePageQuery } from 'lib/queries/react-query/sanity/getAllHomePageQuery/getAllHomePageQuery';
 import { useWallet } from 'lib/wallet/wallet';
 
+import WithLoader from 'components/atoms/WithLoader';
 import BlockContentBody from 'components/molecules/BlockContentBody';
 
 import horsesImg from '../../assets/horses-grazing.png';
@@ -39,7 +40,11 @@ const Home: React.FC<React.PropsWithChildren<unknown>> = () => {
     getAllHomePageQuery({ sanityClient, enabled: !!sanityClient }),
   );
 
-  const { creditClasses, creditClassesPrograms } = useCreditClasses({
+  const {
+    creditClasses,
+    creditClassesPrograms,
+    loading: creditClassesLoading,
+  } = useCreditClasses({
     skippedClassId: SKIPPED_CLASS_ID,
   });
 
@@ -172,12 +177,17 @@ const Home: React.FC<React.PropsWithChildren<unknown>> = () => {
           {creditClassesSection?.bodyRaw && (
             <BlockContentBody body={creditClassesSection?.bodyRaw} />
           )}
-          <CreditClassCards
-            btnText="Learn More"
-            justifyContent={['center', 'center', 'flex-start']}
-            creditClassesContent={creditClasses} // CMS data
-            creditClassesProgram={creditClassesPrograms}
-          />
+          <WithLoader
+            isLoading={creditClassesLoading}
+            sx={{ width: '100%', display: 'flex', justifyContent: 'center' }}
+          >
+            <CreditClassCards
+              btnText="Learn More"
+              justifyContent={['center', 'center', 'flex-start']}
+              creditClassesContent={creditClasses} // CMS data
+              creditClassesProgram={creditClassesPrograms}
+            />
+          </WithLoader>
         </BackgroundImgSection>
       )}
 

diff --git a/web-marketplace/src/pages/Home/hooks/useCreditClasses.ts b/web-marketplace/src/pages/Home/hooks/useCreditClasses.ts
@@ -21,17 +21,18 @@ export const useCreditClasses = ({ skippedClassId }: Props) => {
     useApolloClient() as ApolloClient<NormalizedCacheObject>;
 
   // All credit class from sanity
-  const { data: creditClassData } = useQuery(
-    getAllSanityCreditClassesQuery({ sanityClient, enabled: !!sanityClient }),
-  );
+  const { data: creditClassData, isFetching: isSanityCreditClassLoading } =
+    useQuery(
+      getAllSanityCreditClassesQuery({ sanityClient, enabled: !!sanityClient }),
+    );
 
   // Filtered based on env variable
   const creditClassesFiltered = creditClassData?.allCreditClass?.filter(
     c => c.path !== skippedClassId,
   );
 
   // Credit Classes metadata
-  const { classesMetadata } = useClassesWithMetadata(
+  const { classesMetadata, isClassesMetadataLoading } = useClassesWithMetadata(
     creditClassesFiltered?.map(creditClass =>
       creditClass.path === null ? undefined : creditClass.path,
     ),
@@ -48,6 +49,9 @@ export const useCreditClasses = ({ skippedClassId }: Props) => {
         }),
       ) ?? [],
   });
+  const isDbDataByOnChainIdLoading = dbDataByOnChainIdDataResults.some(
+    res => res.isFetching,
+  );
 
   // Credit classes program
   const creditClassesPrograms = creditClassesFiltered?.map((_, index) =>
@@ -61,5 +65,9 @@ export const useCreditClasses = ({ skippedClassId }: Props) => {
   return {
     creditClasses: creditClassesFiltered,
     creditClassesPrograms,
+    loading:
+      isDbDataByOnChainIdLoading ||
+      isClassesMetadataLoading ||
+      isSanityCreditClassLoading,
   };
 };
diff --git a/web-marketplace/src/pages/Home/hooks/useFeaturedProjects.ts b/web-marketplace/src/pages/Home/hooks/useFeaturedProjects.ts
@@ -13,7 +13,6 @@ export function useFeaturedProjects(): {
     metadata: true, // to discard projects without metadata prop
     sort: PROJECTS_SORT,
   });
-
   return {
     featuredProjects: projectsWithOrderData,
     loading,

diff --git a/web-marketplace/src/pages/Projects/Projects.tsx b/web-marketplace/src/pages/Projects/Projects.tsx
@@ -62,9 +62,15 @@ export const Projects: React.FC<React.PropsWithChildren<unknown>> = () => {
   // Page index starts at 0 for logic
   const page = Number(routePage) - 1;
 
-  const { creditClassesWithMetadata } = useFetchCreditClasses();
+  const {
+    creditClassesWithMetadata,
+    isLoading: isCreditClassesWithMetadataLoading,
+  } = useFetchCreditClasses();
 
-  const { data: sanityCreditClassesData } = useQuery(
+  const {
+    data: sanityCreditClassesData,
+    isLoading: isSanityCreditClassesLoading,
+  } = useQuery(
     getAllSanityCreditClassesQuery({ sanityClient, enabled: !!sanityClient }),
   );
 
@@ -115,7 +121,12 @@ export const Projects: React.FC<React.PropsWithChildren<unknown>> = () => {
     setUseCommunityProjects(undefined);
   };
 
-  if (loading) return <Loading />;
+  if (
+    loading ||
+    isSanityCreditClassesLoading ||
+    isCreditClassesWithMetadataLoading
+  )
+    return <Loading />;
 
   return (
     <>

diff --git a/web-marketplace/src/pages/Projects/hooks/useFetchCreditClasses.tsx b/web-marketplace/src/pages/Projects/hooks/useFetchCreditClasses.tsx
@@ -16,17 +16,18 @@ export type CreditClassWithMedata = {
 
 type UseFetchCreditClassesResponse = {
   creditClassesWithMetadata?: CreditClassWithMedata[];
+  isLoading: boolean;
 };
 
 export const useFetchCreditClasses = (): UseFetchCreditClassesResponse => {
   const { ecocreditClient, dataClient } = useLedger();
-  const { data: creditClassesdata } = useQuery(
+  const { data: creditClassesData, isLoading } = useQuery(
     getClassesQuery({
       client: ecocreditClient,
       enabled: !!ecocreditClient,
     }),
   );
-  const creditClasses = creditClassesdata?.classes;
+  const creditClasses = creditClassesData?.classes;
 
   const creditClassesMetadataResults = useQueries({
     queries:
@@ -48,5 +49,7 @@ export const useFetchCreditClasses = (): UseFetchCreditClassesResponse => {
 
   return {
     creditClassesWithMetadata,
+    isLoading:
+      isLoading || creditClassesMetadataResults.some(res => res.isLoading),
   };
 };