BG-980: Speed up loading of some profile endpoint

src/App/Header/UserMenu/EndowmentLink.tsx

@@ -1,13 +1,13 @@
 import { Link } from "react-router-dom";
-import { useProfileQuery } from "services/aws/aws";
+import { useEndowment } from "services/aws/useEndowment";
 import ContentLoader from "components/ContentLoader";
 import Image from "components/Image";
 import QueryLoader from "components/QueryLoader";
 import { appRoutes } from "constants/routes";
 
 type Props = { endowId: number };
 export default function EndowmentLink({ endowId }: Props) {
-  const query = useProfileQuery({ endowId });
+  const query = useEndowment(endowId, ["logo", "name"]);
   return (
     <QueryLoader
       queryState={query}

src/components/QueryLoader.tsx

@@ -1,15 +1,8 @@
-import { BaseQueryFn } from "@reduxjs/toolkit/dist/query";
-import { TypedUseQueryHookResult } from "@reduxjs/toolkit/dist/query/react/buildHooks";
 import { ReactElement } from "react";
+import { QueryState } from "types/third-party/redux";
 import Status, { ErrorStatus, LoadingStatus } from "components/Status";
 import { isEmpty } from "helpers";
 
-type Base = BaseQueryFn<any, unknown, unknown, {}, {}>;
-type QueryState<T> = Pick<
-  TypedUseQueryHookResult<T, any, Base>,
-  "isLoading" | "isError" | "data"
->;
-
 type Props<T> = {
   queryState: QueryState<T>;
   messages: {

src/pages/Admin/Charity/Dashboard/Dashboard.tsx

@@ -1,14 +1,14 @@
 import { PropsWithChildren } from "react";
 import { useAdminContext } from "pages/Admin/Context";
-import { useProfileQuery } from "services/aws/aws";
+import { useEndowBalanceQuery } from "services/apes";
 import ContentLoader from "components/ContentLoader";
 import QueryLoader from "components/QueryLoader";
 import Seo from "../Seo";
 import Balance from "./Balance";
 
 export default function Dashboard() {
   const { id } = useAdminContext();
-  const queryState = useProfileQuery({ endowId: id }, { skip: !id });
+  const queryState = useEndowBalanceQuery(id, { skip: !id });
 
   return (
     <div className="@container w-full max-w-4xl grid content-start mt-6">

src/pages/Admin/Charity/Donations/DonationsTable.tsx

@@ -9,10 +9,17 @@ import Table from "./Table";
 export default function DonationsTable({ classes = "" }) {
   const { id: endowmentId } = useAdminContext();
 
-  const { data, isLoading, isError, hasMore, loadNextPage, isLoadingNextPage } =
-    usePaginatedDonationRecords({
-      endowmentId: endowmentId.toString(),
-    });
+  const {
+    data,
+    isLoading,
+    isFetching,
+    isError,
+    hasMore,
+    loadNextPage,
+    isLoadingNextPage,
+  } = usePaginatedDonationRecords({
+    endowmentId: endowmentId.toString(),
+  });
 
   const isLoadingOrError = isLoading || isLoadingNextPage || isError;
   return (
@@ -21,6 +28,7 @@ export default function DonationsTable({ classes = "" }) {
         queryState={{
           data: data?.Items,
           isLoading,
+          isFetching,
           isError,
         }}
         messages={{

src/pages/Admin/Charity/EditProfile/index.tsx

@@ -5,7 +5,7 @@ import {
   EndowmentProfileUpdate,
   EndowmentProfile as TProfile,
 } from "types/aws";
-import { useProfileQuery } from "services/aws/aws";
+import { useEndowment } from "services/aws/useEndowment";
 import { country } from "components/CountrySelector";
 import { FormError, FormSkeleton } from "components/admin";
 import { adminRoutes } from "constants/routes";
@@ -19,12 +19,7 @@ import { toProfileUpdate } from "./update";
 
 export default function EditProfile() {
   const { id } = useAdminContext();
-  const {
-    data: profile,
-    isLoading,
-    isFetching,
-    isError,
-  } = useProfileQuery({ endowId: id });
+  const { data: profile, isLoading, isError, isFetching } = useEndowment(id);
 
   const content =
     isLoading || isFetching ? (
@@ -57,11 +52,11 @@ function FormWithContext(props: TProfile & { id: number }) {
       publicUrl: props.image ?? "",
       preview: props.image ?? "",
     },
-    logo: { name: "", publicUrl: props.logo ?? "", preview: props.logo ?? "" },
+    logo: { name: "", publicUrl: props.logo, preview: props.logo },
     endow_designation: init.endow_designation
       ? { label: init.endow_designation, value: init.endow_designation }
       : { label: "", value: "" },
-    hq_country: country(props.hq_country ?? ""),
+    hq_country: country(props.hq_country),
     sdgs: init.sdgs.map((x) => getSDGLabelValuePair(x, unsdgs[x].title)),
     active_in_countries: init.active_in_countries.map((x) => ({
       label: x,

src/pages/Admin/Charity/EditProfile/update.ts

@@ -19,36 +19,31 @@ export function toProfileUpdate(arg: Arg): EndowmentProfileUpdate {
     const { data: d } = arg;
     return {
       id: d.id,
-      active_in_countries: d.active_in_countries ?? [],
-      categories: { sdgs: d.sdgs ?? [], general: [] },
-      charity_navigator_rating: "",
-      contact_email: d.contact_email ?? "",
-      contributor_verification_required:
-        d.contributor_verification_required ?? false,
-      endow_designation: d.endow_designation ?? "",
-      hq_country: d.hq_country ?? "",
-      image: d.image ?? "",
-      kyc_donors_only: d.kyc_donors_only ?? false,
-      logo: d.logo ?? "",
-      name: d.name ?? "",
-      overview: d.overview ?? "",
+      active_in_countries: d.active_in_countries,
+      contact_email: d.contact_email,
+      endow_designation: d.endow_designation,
+      hq_country: d.hq_country,
+      image: d.image,
+      kyc_donors_only: d.kyc_donors_only,
+      logo: d.logo,
+      name: d.name,
+      overview: d.overview,
       program: [], //program is updated in /create-program
       program_id: "",
-      published: d.published ?? false,
-      registration_number: d.registration_number ?? "",
-      sdgs: d.sdgs ?? [],
+      published: d.published,
+      registration_number: d.registration_number,
+      sdgs: d.sdgs,
       social_media_urls: {
-        facebook: d.social_media_urls?.facebook ?? "",
-        instagram: d.social_media_urls?.instagram ?? "",
-        linkedin: d.social_media_urls?.linkedin ?? "",
-        twitter: d.social_media_urls?.twitter ?? "",
-        discord: d.social_media_urls?.discord ?? "",
-        youtube: d.social_media_urls?.youtube ?? "",
-        tiktok: d.social_media_urls?.tiktok ?? "",
+        facebook: d.social_media_urls.facebook,
+        instagram: d.social_media_urls.instagram,
+        linkedin: d.social_media_urls.linkedin,
+        twitter: d.social_media_urls.twitter,
+        discord: d.social_media_urls.discord,
+        youtube: d.social_media_urls.youtube,
+        tiktok: d.social_media_urls.tiktok,
       },
-      street_address: d.street_address ?? "",
+      street_address: d.street_address,
       tagline: d.tagline ?? "",
-      tier: 1,
       url: d.url ?? "",
     };
   }

src/pages/Admin/Charity/Programs/List.tsx

@@ -1,13 +1,13 @@
 import { useAdminContext } from "pages/Admin/Context";
-import { useProfileQuery } from "services/aws/aws";
+import { useEndowment } from "services/aws/useEndowment";
 import ContentLoader from "components/ContentLoader";
 import QueryLoader from "components/QueryLoader";
 import { ErrorStatus, Info } from "components/Status";
 import { Program } from "./Program";
 
 export default function List() {
   const { id } = useAdminContext();
-  const queryState = useProfileQuery({ endowId: id });
+  const queryState = useEndowment(id, ["program"]);
 
   return (
     <QueryLoader

src/pages/Admin/Charity/Seo.tsx

@@ -1,4 +1,4 @@
-import { useProfileQuery } from "services/aws/aws";
+import { useEndowment } from "services/aws/useEndowment";
 import CommonSEO from "components/Seo";
 import { APP_NAME, DAPP_URL } from "constants/env";
 import { appRoutes } from "constants/routes";
@@ -12,12 +12,12 @@ export default function Seo({
   url?: string;
 }) {
   const { id } = useAdminContext();
-  const { data: profile } = useProfileQuery({ endowId: id });
+  const { data: profile } = useEndowment(id, ["logo", "name", "overview"]);
 
   return (
     <CommonSEO
       title={`${title} - ${APP_NAME}`}
-      description={(profile?.overview ?? "").slice(0, 140)}
+      description={profile?.overview.slice(0, 140)}
       name={profile?.name}
       image={profile?.logo}
       url={`${DAPP_URL}/${appRoutes.admin}/${id}/${url}`}

src/pages/Admin/Sidebar/Header/Header.tsx

@@ -1,10 +1,10 @@
-import { useProfileQuery } from "services/aws/aws";
+import { useEndowment } from "services/aws/useEndowment";
 import Image from "components/Image";
 import { useAdminContext } from "../../Context";
 
 export default function Header() {
   const { id } = useAdminContext();
-  const { data: profile, isLoading } = useProfileQuery({ endowId: id });
+  const { data: profile, isLoading } = useEndowment(id, ["logo", "name"]);
 
   return (
     <div

src/pages/Applications/Applications.tsx

@@ -49,7 +49,8 @@ function Applications() {
       <QueryLoader
         queryState={{
           data: data?.Items,
-          isLoading: isLoading,
+          isLoading,
+          isFetching,
           isError: isError,
         }}
         messages={{

src/pages/BankingApplications/BankingApplications.tsx

@@ -32,7 +32,8 @@ function BankingApplications() {
       <QueryLoader
         queryState={{
           data: data?.items,
-          isLoading: isLoading,
+          isLoading,
+          isFetching,
           isError: isError,
         }}
         messages={{

src/pages/Donate/index.tsx

@@ -1,5 +1,5 @@
 import { useParams } from "react-router-dom";
-import { useProfileQuery } from "services/aws/aws";
+import { useEndowment } from "services/aws/useEndowment";
 import QueryLoader from "components/QueryLoader";
 import Seo from "components/Seo";
 import { idParamToNum } from "helpers";
@@ -9,7 +9,15 @@ import Content from "./Content";
 export default function Donate() {
   const { id } = useParams<{ id: string }>();
   const numId = idParamToNum(id);
-  const queryState = useProfileQuery({ endowId: numId }, { skip: numId === 0 });
+  const queryState = useEndowment(numId, [
+    "fiscal_sponsored",
+    "id",
+    "image",
+    "kyc_donors_only",
+    "logo",
+    "name",
+    "overview",
+  ]);
 
   return (
     <section className="grid content-start w-full font-work min-h-screen sm:min-h-[900px] pb-20">
@@ -33,7 +41,7 @@ export default function Donate() {
           <>
             <Seo
               title={`Donate to ${profile.name} - ${APP_NAME}`}
-              description={`${(profile?.overview ?? "").slice(0, 140)}`}
+              description={profile.overview.slice(0, 140)}
               name={`${profile.name}`}
               image={`${profile.logo}`}
               url={`${DAPP_URL}/donate/${profile.id}`}

src/pages/DonateWidget/ApiKeyChecker.tsx

@@ -8,7 +8,12 @@ export default function ApiKeyChecker(props: PropsWithChildren<{}>) {
 
   return (
     <QueryLoader
-      queryState={{ isError: false, isLoading: false, data: {} }}
+      queryState={{
+        isError: false,
+        isLoading: false,
+        isFetching: false,
+        data: {},
+      }}
       messages={{ error: "Invalid API key" }}
       classes={{ container: "text-center mt-8" }}
     >

src/pages/DonateWidget/Content.tsx

@@ -43,7 +43,7 @@ export default function Content({
     >
       <Seo
         title={`Donate to ${profile.name} - ${APP_NAME}`}
-        description={(profile.overview ?? "").slice(0, 140)}
+        description={profile.overview.slice(0, 140)}
         name={profile.name}
         image={`${profile.logo}`}
         url={`${DAPP_URL}/donate_widget/${profile.id}`}

src/pages/DonateWidget/DonateWidget.tsx

@@ -1,6 +1,6 @@
 import { useEffect } from "react";
 import { useParams, useSearchParams } from "react-router-dom";
-import { useProfileQuery } from "services/aws/aws";
+import { useEndowment } from "services/aws/useEndowment";
 import { DappLogo } from "components/Image";
 import LoaderRing from "components/LoaderRing";
 import QueryLoader from "components/QueryLoader";
@@ -14,7 +14,7 @@ export default function DonateWidget() {
   const routeParams = useParams();
   const [searchParams] = useSearchParams();
   const endowId = idParamToNum(routeParams.id);
-  const queryState = useProfileQuery({ endowId }, { skip: endowId === 0 });
+  const queryState = useEndowment(endowId);
 
   /** Hide the Intercom chatbot */
   useEffect(() => {

src/pages/Donations/index.tsx

@@ -16,6 +16,7 @@ export default withAuth(function Donations({ user }) {
     hasMore,
     isError,
     isLoading,
+    isFetching,
     isLoadingNextPage,
     query,
     loadNextPage,
@@ -62,7 +63,8 @@ export default withAuth(function Donations({ user }) {
       <QueryLoader
         queryState={{
           data: data?.Items,
-          isLoading: isLoading,
+          isLoading,
+          isFetching,
           isError: isError,
         }}
         messages={{