diff --git a/web-marketplace/src/components/organisms/ProjectCardsSection/ProjectCardsSection.tsx b/web-marketplace/src/components/organisms/ProjectCardsSection/ProjectCardsSection.tsx
index 6c43627f3e..3afa7ba967 100644
--- 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
index b82dd66a1f..750c9aa479 100644
--- 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
index 659adf30c8..1438923763 100644
--- 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
index e892d34892..19fc1e8202 100644
--- 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
index 9e1851d381..0d2bfc1d3e 100644
--- 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
index 249a13ee15..ce44f4a0e5 100644
--- a/web-marketplace/src/pages/Home/hooks/useCreditClasses.ts
+++ b/web-marketplace/src/pages/Home/hooks/useCreditClasses.ts
@@ -21,9 +21,10 @@ 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(
@@ -31,7 +32,7 @@ export const useCreditClasses = ({ skippedClassId }: Props) => {
   );
 
   // 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
index 6561997525..d1232da20b 100644
--- 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
index 5c795a84f1..84be585004 100644
--- 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
index f318bd1422..5ca5f74366 100644
--- 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),
   };
 };