From 67c5d8ffcef76bc7275b2893dfbf02c5278bf01f Mon Sep 17 00:00:00 2001
From: John Ballesteros <johnshift.dev@gmail.com>
Date: Fri, 30 Aug 2024 14:09:08 +0800
Subject: [PATCH 1/4] feat/ai-grant-program-finder

---
 .../components/ai-grant-program-finder.tsx    | 38 +++++++++-
 .../grant-list/grant-list-items.tsx           | 52 ++++++++++++++
 .../components/grant-list/grant-list.tsx      | 62 +++++++---------
 .../grant-list/use-ai-grant-list.ts           | 56 +++++++++++++++
 src/grants/core/atoms.ts                      |  4 ++
 src/grants/core/query-keys.ts                 |  2 +
 src/grants/data/find-grant-program.ts         | 70 +++++++++++++++++++
 src/grants/hooks/use-ai-grant-finder-query.ts | 27 +++++++
 src/grants/hooks/use-grant-list-query.ts      |  5 +-
 9 files changed, 277 insertions(+), 39 deletions(-)
 create mode 100644 src/grants/components/grant-list/grant-list-items.tsx
 create mode 100644 src/grants/components/grant-list/use-ai-grant-list.ts
 create mode 100644 src/grants/core/atoms.ts
 create mode 100644 src/grants/data/find-grant-program.ts
 create mode 100644 src/grants/hooks/use-ai-grant-finder-query.ts

diff --git a/src/grants/components/ai-grant-program-finder.tsx b/src/grants/components/ai-grant-program-finder.tsx
index 6da7c3ff..c099c806 100644
--- a/src/grants/components/ai-grant-program-finder.tsx
+++ b/src/grants/components/ai-grant-program-finder.tsx
@@ -1,14 +1,20 @@
 'use client';
 
+import { useState } from 'react';
 import { createPortal } from 'react-dom';
 
 import { Button, Textarea } from '@nextui-org/react';
+import { useAtom, useAtomValue } from 'jotai';
 
 import { useIsMounted } from '@/shared/hooks/use-is-mounted';
 import { useIsDesktop } from '@/shared/hooks/use-media-query';
 import { AiIcon } from '@/shared/components/icons/ai-icon';
 
 import { GRANTS_PORTAL_IDS } from '@/grants/core/constants';
+import {
+  aiGrantFinderPending,
+  aiGrantFinderQueryAtom,
+} from '@/grants/core/atoms';
 
 export const AiGrantProgramFinder = () => {
   const isMounted = useIsMounted();
@@ -21,6 +27,26 @@ export const AiGrantProgramFinder = () => {
   const portal =
     typeof window === 'undefined' ? null : document.getElementById(portalId);
 
+  const isPending = useAtomValue(aiGrantFinderPending);
+  const [aiQuery, setAiQuery] = useAtom(aiGrantFinderQueryAtom);
+
+  const [aiQueryInput, setAiQueryInput] = useState('');
+  const onChangeAiQuery: React.ChangeEventHandler<HTMLInputElement> = (e) => {
+    setAiQueryInput(e.target.value);
+  };
+
+  const onFind = () => {
+    setAiQuery(aiQueryInput);
+  };
+
+  const onClear = () => {
+    setAiQuery('');
+    setAiQueryInput('');
+  };
+
+  const buttonText = !!aiQuery && !isPending ? 'Reset' : 'Find';
+  const onClick = aiQuery ? onClear : onFind;
+
   if (!isMounted || !portal) return null;
 
   return createPortal(
@@ -31,6 +57,9 @@ export const AiGrantProgramFinder = () => {
         application best
       </span>
       <Textarea
+        isDisabled={isPending}
+        value={aiQuery || aiQueryInput}
+        onChange={onChangeAiQuery}
         classNames={{
           base: 'grow',
           inputWrapper: 'h-full bg-white/5 grow rounded-lg',
@@ -38,9 +67,14 @@ export const AiGrantProgramFinder = () => {
         }}
         placeholder="Describe your project here"
       />
-      <Button className="is-active mx-auto w-full rounded-lg text-sm font-semibold text-black">
+      <Button
+        isLoading={isPending}
+        isDisabled={!aiQueryInput && !aiQuery}
+        className="is-active mx-auto w-full rounded-lg text-sm font-semibold text-black"
+        onClick={onClick}
+      >
         <AiIcon />
-        <span className='-ml-1'>Find</span>
+        <span className="-ml-1">{buttonText}</span>
       </Button>
     </div>,
     portal,
diff --git a/src/grants/components/grant-list/grant-list-items.tsx b/src/grants/components/grant-list/grant-list-items.tsx
new file mode 100644
index 00000000..cdcf9b54
--- /dev/null
+++ b/src/grants/components/grant-list/grant-list-items.tsx
@@ -0,0 +1,52 @@
+import { useMemo } from 'react';
+
+import { Spinner } from '@nextui-org/react';
+
+import { VirtualWrapper } from '@/shared/components/virtual-wrapper';
+
+import { Grant } from '@/grants/core/schemas';
+import { GrantListItem } from '@/grants/components/grant-list/grant-list-item';
+
+interface Props {
+  grants: Grant[];
+  error: Error | null;
+  inViewRef: (node?: Element | null) => void;
+  hasNextPage: boolean;
+  isPending: boolean;
+}
+
+export const GrantListItems = (props: Props) => {
+  const { grants, error, inViewRef, hasNextPage, isPending } = props;
+
+  const lastItem = useMemo(() => {
+    if (error) return <p>Error: {error.message}</p>;
+
+    if (!hasNextPage) return <p>No more grants to display.</p>;
+
+    return (
+      <div ref={inViewRef} className="flex w-full justify-center">
+        <Spinner color="white" />
+      </div>
+    );
+  }, [error, hasNextPage, inViewRef]);
+
+  if (isPending) return <p>Loading Grants ...</p>;
+
+  if (!grants.length) {
+    return error ? <p>Error: {error.message}</p> : <p>No grants found.</p>;
+  }
+
+  return (
+    <div className="flex flex-col gap-4">
+      <VirtualWrapper count={grants.length}>
+        {(index) => (
+          <div className="pt-6 lg:pt-8">
+            <GrantListItem grant={grants[index]} />
+          </div>
+        )}
+      </VirtualWrapper>
+
+      {lastItem}
+    </div>
+  );
+};
diff --git a/src/grants/components/grant-list/grant-list.tsx b/src/grants/components/grant-list/grant-list.tsx
index 454faaee..06cb3874 100644
--- a/src/grants/components/grant-list/grant-list.tsx
+++ b/src/grants/components/grant-list/grant-list.tsx
@@ -1,48 +1,38 @@
 'use client';
 
-import { useMemo } from 'react';
+import { useEffect } from 'react';
 
-import { Spinner } from '@nextui-org/react';
+import { useAtom, useAtomValue } from 'jotai';
 
-import { VirtualWrapper } from '@/shared/components/virtual-wrapper';
+import {
+  aiGrantFinderPending,
+  aiGrantFinderQueryAtom,
+} from '@/grants/core/atoms';
+import { GrantListItems } from '@/grants/components/grant-list/grant-list-items';
+import { useAiGrantList } from '@/grants/components/grant-list/use-ai-grant-list';
 
-import { GrantListItem } from './grant-list-item';
 import { useGrantList } from './use-grant-list';
 
-export const GrantList = () => {
-  // TODO: JOB-682
-
-  const { grants, error, inViewRef, hasNextPage, isPending } = useGrantList();
-
-  const lastItem = useMemo(() => {
-    if (error) return <p>Error: {error.message}</p>;
-
-    if (!hasNextPage) return <p>No more grants available.</p>;
-
-    return (
-      <div ref={inViewRef} className="flex w-full justify-center">
-        <Spinner color="white" />
-      </div>
-    );
-  }, [error, hasNextPage, inViewRef]);
+export const FetchedGrantList = () => {
+  const props = useGrantList();
+  return <GrantListItems {...props} />;
+};
 
-  if (isPending) return <p>Loading Grants ...</p>;
+export const AiGrantList = () => {
+  const props = useAiGrantList();
+  const [isPending, setIsPending] = useAtom(aiGrantFinderPending);
 
-  if (!grants.length) {
-    return error ? <p>Error: {error.message}</p> : <p>No grants found.</p>;
-  }
+  // Sync pending
+  useEffect(() => {
+    if (isPending !== props.isPending) {
+      setIsPending(props.isPending);
+    }
+  }, [isPending, props.isPending, setIsPending]);
 
-  return (
-    <div className="flex flex-col gap-4">
-      <VirtualWrapper count={grants.length}>
-        {(index) => (
-          <div className="pt-6 lg:pt-8">
-            <GrantListItem grant={grants[index]} />
-          </div>
-        )}
-      </VirtualWrapper>
+  return <GrantListItems {...props} />;
+};
 
-      {lastItem}
-    </div>
-  );
+export const GrantList = () => {
+  const aiQuery = useAtomValue(aiGrantFinderQueryAtom);
+  return aiQuery ? <AiGrantList /> : <FetchedGrantList />;
 };
diff --git a/src/grants/components/grant-list/use-ai-grant-list.ts b/src/grants/components/grant-list/use-ai-grant-list.ts
new file mode 100644
index 00000000..9645d52a
--- /dev/null
+++ b/src/grants/components/grant-list/use-ai-grant-list.ts
@@ -0,0 +1,56 @@
+import { useEffect } from 'react';
+import { useInView } from 'react-intersection-observer';
+
+import { useAtomValue } from 'jotai';
+
+import { getQueryClient } from '@/shared/utils/get-query-client';
+
+import { grantQueryKeys } from '@/grants/core/query-keys';
+import { aiGrantFinderQueryAtom } from '@/grants/core/atoms';
+import { getGrantDetails } from '@/grants/data/get-grant-details';
+import { useAiGrantFinderQuery } from '@/grants/hooks/use-ai-grant-finder-query';
+
+export const useAiGrantList = () => {
+  const queryClient = getQueryClient();
+  const aiQuery = useAtomValue(aiGrantFinderQueryAtom);
+
+  const {
+    data,
+    error,
+    fetchNextPage,
+    hasNextPage,
+    isPending,
+    isFetching,
+    isSuccess,
+  } = useAiGrantFinderQuery(aiQuery);
+
+  // Next page fetch on scroll
+  const { ref: inViewRef } = useInView({
+    threshold: 1,
+    onChange: (inView) => {
+      if (inView && !error && !isFetching) fetchNextPage();
+    },
+  });
+
+  // Prefetch grant details
+  useEffect(() => {
+    if (isSuccess && data) {
+      const items = data.pages.flatMap((d) => d.data);
+      for (const item of items) {
+        const { slug } = item;
+        queryClient.prefetchQuery({
+          queryKey: grantQueryKeys.grant(slug),
+          queryFn: () => getGrantDetails(slug),
+        });
+      }
+    }
+  });
+
+  return {
+    grants: data?.pages.flatMap((d) => d.data) ?? [],
+    error,
+    inViewRef,
+    hasNextPage,
+    isPending,
+  };
+};
diff --git a/src/grants/core/atoms.ts b/src/grants/core/atoms.ts
new file mode 100644
index 00000000..3277f6f1
--- /dev/null
+++ b/src/grants/core/atoms.ts
@@ -0,0 +1,4 @@
+import { atom } from 'jotai';
+
+export const aiGrantFinderQueryAtom = atom<string>('');
+export const aiGrantFinderPending = atom<boolean>(false);
diff --git a/src/grants/core/query-keys.ts b/src/grants/core/query-keys.ts
index 07dbe22f..111a8fce 100644
--- a/src/grants/core/query-keys.ts
+++ b/src/grants/core/query-keys.ts
@@ -1,5 +1,7 @@
 export const grantQueryKeys = {
   all: ['grants'] as const,
+  aiGrantFinder: (query: string) =>
+    [...grantQueryKeys.all, 'ai-find', query] as const,
   list: (params: string | Record<string, string>) => {
     const searchParams =
       typeof params === 'string'
diff --git a/src/grants/data/find-grant-program.ts b/src/grants/data/find-grant-program.ts
new file mode 100644
index 00000000..77640224
--- /dev/null
+++ b/src/grants/data/find-grant-program.ts
@@ -0,0 +1,70 @@
+import { MW_URL } from '@/shared/core/envs';
+import { errMsg, ResponseError } from '@/shared/core/errors';
+import { sentryMessage } from '@/shared/utils/sentry-message';
+
+import { grantDtoInfiniteListPageSchema } from '@/grants/core/schemas';
+import { dtoToGrant } from '@/grants/utils/dto-to-grant';
+
+const LABEL = 'findGrantProgram';
+const GRANTS_QUERY_URL = `${MW_URL}/grants/query`;
+
+interface Props {
+  page: number;
+  query: string;
+  limit?: number;
+}
+
+export const findGrantProgram = async ({ page, query, limit = 10 }: Props) => {
+  if (typeof window !== 'undefined' && !window.navigator.onLine) {
+    throw new Error(errMsg.OFFLINE);
+  }
+
+  try {
+    const res = await fetch(GRANTS_QUERY_URL, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        page,
+        query,
+        limit,
+      }),
+    });
+
+    if (!res.ok) {
+      throw new ResponseError(errMsg.ERR_RESPONSE, res);
+    }
+
+    const jsonData = await res.json();
+    const result = grantDtoInfiniteListPageSchema.safeParse(jsonData);
+    if (!result.success) {
+      throw new ResponseError(
+        errMsg.INVALID_RESPONSE_SCHEMA,
+        res,
+        JSON.stringify({ details: result.error.issues }),
+      );
+    }
+
+    return { ...result.data, data: result.data.data.map(dtoToGrant) };
+  } catch (err: unknown) {
+    if (err instanceof ResponseError) {
+      sentryMessage(
+        LABEL,
+        JSON.stringify({ url: GRANTS_QUERY_URL, ...(await err.toJSON()) }),
+      );
+
+      if (err.res.status === 400) {
+        const jsonRes = await err.res.json();
+        throw new Error(jsonRes.message || errMsg.ERR_BAD_REQUEST);
+      }
+    } else {
+      sentryMessage(
+        LABEL,
+        JSON.stringify({ url: GRANTS_QUERY_URL, msg: (err as Error).message }),
+      );
+    }
+
+    throw new Error(errMsg.INTERNAL);
+  }
+};
diff --git a/src/grants/hooks/use-ai-grant-finder-query.ts b/src/grants/hooks/use-ai-grant-finder-query.ts
new file mode 100644
index 00000000..ecc01f66
--- /dev/null
+++ b/src/grants/hooks/use-ai-grant-finder-query.ts
@@ -0,0 +1,27 @@
+import { InfiniteData, useInfiniteQuery } from '@tanstack/react-query';
+
+import { QUERY_STALETIME } from '@/shared/core/constants';
+
+import { GrantQueryKeys, grantQueryKeys } from '@/grants/core/query-keys';
+import { GrantInfiniteListPage } from '@/grants/core/schemas';
+import { findGrantProgram } from '@/grants/data/find-grant-program';
+
+export const useAiGrantFinderQuery = (query: string) => {
+  return useInfiniteQuery<
+    GrantInfiniteListPage,
+    Error,
+    InfiniteData<GrantInfiniteListPage, number>,
+    ReturnType<GrantQueryKeys['aiGrantFinder']>,
+    number
+  >({
+    enabled: !!query,
+    queryKey: grantQueryKeys.aiGrantFinder(query),
+    queryFn: async ({ pageParam: page }) => findGrantProgram({ page, query }),
+    initialPageParam: 1,
+    getNextPageParam: ({ page, data }) =>
+      typeof page === 'number' && page > 0 && data.length > 10
+        ? page + 1
+        : undefined,
+    staleTime: QUERY_STALETIME.DEFAULT,
+  });
+};
diff --git a/src/grants/hooks/use-grant-list-query.ts b/src/grants/hooks/use-grant-list-query.ts
index e9d8383c..e9ccb870 100644
--- a/src/grants/hooks/use-grant-list-query.ts
+++ b/src/grants/hooks/use-grant-list-query.ts
@@ -1,6 +1,7 @@
 import { InfiniteData, useInfiniteQuery } from '@tanstack/react-query';
 
 import { QUERY_STALETIME } from '@/shared/core/constants';
+import { PAGE_SIZE } from '@/shared/core/envs';
 
 import { GrantQueryKeys, grantQueryKeys } from '@/grants/core/query-keys';
 import { GrantInfiniteListPage } from '@/grants/core/schemas';
@@ -22,7 +23,9 @@ export const useGrantListQuery = () => {
       getGrantList({ page, searchParams }),
     initialPageParam: 1,
     getNextPageParam: ({ page, data }) =>
-      typeof page === 'number' && page > 0 && data.length > 0
+      typeof page === 'number' &&
+      page > 0 &&
+      data.length > (Number(PAGE_SIZE) || 20)
         ? page + 1
         : undefined,
     staleTime: QUERY_STALETIME.DEFAULT,

From 894bd1c54c8f109f7d2bf8abb7272fe2cc10620e Mon Sep 17 00:00:00 2001
From: John Ballesteros <johnshift.dev@gmail.com>
Date: Fri, 30 Aug 2024 14:57:59 +0800
Subject: [PATCH 2/4] refactor: add skeleton

---
 .../ai-grant-program-finder-skeleton.tsx      | 20 +++++
 .../ai-grant-program-finder.tsx               |  0
 .../client-content.tsx                        | 80 +++++++++++++++++++
 .../ai-grant-program-finder/index.ts          |  1 +
 .../components/grant-list/ai-grant-list.tsx   | 46 +++++++++++
 src/grants/pages/grant-list-page.tsx          | 17 +++-
 src/shared/components/nav/sections.tsx        | 16 +++-
 src/shared/components/nav/xxx.tsx             |  8 ++
 8 files changed, 186 insertions(+), 2 deletions(-)
 create mode 100644 src/grants/components/ai-grant-program-finder/ai-grant-program-finder-skeleton.tsx
 rename src/grants/components/{ => ai-grant-program-finder}/ai-grant-program-finder.tsx (100%)
 create mode 100644 src/grants/components/ai-grant-program-finder/client-content.tsx
 create mode 100644 src/grants/components/ai-grant-program-finder/index.ts
 create mode 100644 src/grants/components/grant-list/ai-grant-list.tsx
 create mode 100644 src/shared/components/nav/xxx.tsx

diff --git a/src/grants/components/ai-grant-program-finder/ai-grant-program-finder-skeleton.tsx b/src/grants/components/ai-grant-program-finder/ai-grant-program-finder-skeleton.tsx
new file mode 100644
index 00000000..3554a69f
--- /dev/null
+++ b/src/grants/components/ai-grant-program-finder/ai-grant-program-finder-skeleton.tsx
@@ -0,0 +1,20 @@
+'use client';
+
+import { Skeleton } from '@nextui-org/react';
+
+import { useIsMounted } from '@/shared/hooks/use-is-mounted';
+
+export const AiGrantProgramFinderSkeleton = () => {
+  const isMounted = useIsMounted();
+  return isMounted ? null : (
+    <div className="mt-5 flex h-full flex-col gap-4 rounded-20 border border-white/10 p-4 md:mt-6 lg:mt-0">
+      <h2 className="text-xl font-semibold">AI Grant Program Finder</h2>
+      <span className="text-sm">
+        Our AI assistant will help you identify which grant program suits your
+        application best
+      </span>
+      <Skeleton className="min-h-[88px] grow rounded-lg" />
+      <Skeleton className="h-10 w-full rounded-lg" />
+    </div>
+  );
+};
diff --git a/src/grants/components/ai-grant-program-finder.tsx b/src/grants/components/ai-grant-program-finder/ai-grant-program-finder.tsx
similarity index 100%
rename from src/grants/components/ai-grant-program-finder.tsx
rename to src/grants/components/ai-grant-program-finder/ai-grant-program-finder.tsx
diff --git a/src/grants/components/ai-grant-program-finder/client-content.tsx b/src/grants/components/ai-grant-program-finder/client-content.tsx
new file mode 100644
index 00000000..fe3f9ba1
--- /dev/null
+++ b/src/grants/components/ai-grant-program-finder/client-content.tsx
@@ -0,0 +1,80 @@
+'use client';
+
+import { useState } from 'react';
+import { createPortal } from 'react-dom';
+
+import { Button, Textarea } from '@nextui-org/react';
+import { useAtom, useAtomValue } from 'jotai';
+
+import { useIsMounted } from '@/shared/hooks/use-is-mounted';
+import { useIsDesktop } from '@/shared/hooks/use-media-query';
+
+import { GRANTS_PORTAL_IDS } from '@/grants/core/constants';
+import {
+  aiGrantFinderPending,
+  aiGrantFinderQueryAtom,
+} from '@/grants/core/atoms';
+
+export const ClientContent = () => {
+  const isMounted = useIsMounted();
+  const isDesktop = useIsDesktop();
+
+  const portalId = isDesktop
+    ? GRANTS_PORTAL_IDS.AI_FINDER_DESKTOP
+    : GRANTS_PORTAL_IDS.AI_FINDER_MOBILE;
+
+  const portal =
+    typeof window === 'undefined' ? null : document.getElementById(portalId);
+
+  const isPending = useAtomValue(aiGrantFinderPending);
+  const [aiQuery, setAiQuery] = useAtom(aiGrantFinderQueryAtom);
+
+  const [aiQueryInput, setAiQueryInput] = useState('');
+  const onChangeAiQuery: React.ChangeEventHandler<HTMLInputElement> = (e) => {
+    setAiQueryInput(e.target.value);
+  };
+
+  const onFind = () => {
+    setAiQuery(aiQueryInput);
+  };
+
+  const onClear = () => {
+    setAiQuery('');
+    setAiQueryInput('');
+  };
+
+  const buttonText = !!aiQuery && !isPending ? 'Reset' : 'Find';
+  const onClick = aiQuery ? onClear : onFind;
+
+  if (!isMounted || !portal) return null;
+
+  return createPortal(
+    <div className="mt-5 flex h-full flex-col gap-4 rounded-20 border border-white/10 p-4 md:mt-6 lg:mt-0">
+      <h2 className="text-xl font-semibold">AI Grant Program Finder</h2>
+      <span className="text-sm">
+        Our AI assistant will help you identify which grant program suits your
+        application best
+      </span>
+      <Textarea
+        isDisabled={isPending}
+        value={aiQuery || aiQueryInput}
+        onChange={onChangeAiQuery}
+        classNames={{
+          base: 'grow',
+          inputWrapper: 'h-full bg-white/5 grow rounded-lg',
+          input: 'placeholder:text-white placeholder:text-sm text-base',
+        }}
+        placeholder="Describe your project here"
+      />
+      <Button
+        isLoading={isPending}
+        isDisabled={!aiQueryInput && !aiQuery}
+        className="is-active mx-auto w-full rounded-lg text-sm font-semibold text-black"
+        onClick={onClick}
+      >
+        <span>{buttonText}</span>
+      </Button>
+    </div>,
+    portal,
+  );
+};
diff --git a/src/grants/components/ai-grant-program-finder/index.ts b/src/grants/components/ai-grant-program-finder/index.ts
new file mode 100644
index 00000000..d53a3f24
--- /dev/null
+++ b/src/grants/components/ai-grant-program-finder/index.ts
@@ -0,0 +1 @@
+export * from './ai-grant-program-finder';
diff --git a/src/grants/components/grant-list/ai-grant-list.tsx b/src/grants/components/grant-list/ai-grant-list.tsx
new file mode 100644
index 00000000..8cc4515c
--- /dev/null
+++ b/src/grants/components/grant-list/ai-grant-list.tsx
@@ -0,0 +1,46 @@
+import { useMemo } from 'react';
+
+import { Spinner } from '@nextui-org/react';
+
+import { VirtualWrapper } from '@/shared/components/virtual-wrapper';
+
+import { GrantListItem } from '@/grants/components/grant-list/grant-list-item';
+import { useAiGrantList } from '@/grants/components/grant-list/use-ai-grant-list';
+
+export const AiGrantList = () => {
+  // TODO: JOB-682
+
+  const { grants, error, inViewRef, hasNextPage, isPending } = useAiGrantList();
+
+  const lastItem = useMemo(() => {
+    if (error) return <p>Error: {error.message}</p>;
+
+    if (!hasNextPage) return <p>No more grants available.</p>;
+
+    return (
+      <div ref={inViewRef} className="flex w-full justify-center">
+        <Spinner color="white" />
+      </div>
+    );
+  }, [error, hasNextPage, inViewRef]);
+
+  if (isPending) return <p>Loading Grants ...</p>;
+
+  if (!grants.length) {
+    return error ? <p>Error: {error.message}</p> : <p>No grants found.</p>;
+  }
+
+  return (
+    <div className="flex flex-col gap-4">
+      <VirtualWrapper count={grants.length}>
+        {(index) => (
+          <div className="pt-6 lg:pt-8">
+            <GrantListItem grant={grants[index]} />
+          </div>
+        )}
+      </VirtualWrapper>
+
+      {lastItem}
+    </div>
+  );
+};
diff --git a/src/grants/pages/grant-list-page.tsx b/src/grants/pages/grant-list-page.tsx
index 50b8162f..7c7209e7 100644
--- a/src/grants/pages/grant-list-page.tsx
+++ b/src/grants/pages/grant-list-page.tsx
@@ -1,3 +1,5 @@
+import dynamic from 'next/dynamic';
+
 import { dehydrate, HydrationBoundary } from '@tanstack/react-query';
 
 import { getQueryClient } from '@/shared/utils/get-query-client';
@@ -9,6 +11,14 @@ import { getGrantList } from '@/grants/data/get-grant-list';
 import { AiGrantProgramFinder } from '@/grants/components/ai-grant-program-finder';
 import { GrantList } from '@/grants/components/grant-list/grant-list';
 
+const AiGrantProgramFinderSkeleton = dynamic(
+  () =>
+    import(
+      '@/grants/components/ai-grant-program-finder/ai-grant-program-finder-skeleton'
+    ).then((m) => m.AiGrantProgramFinderSkeleton),
+  { ssr: true },
+);
+
 // TODO: Check if need to use search params(filter related), if so need to force dynamic
 
 export const GrantListPage = async () => {
@@ -41,10 +51,15 @@ export const GrantListPage = async () => {
         <h1 className="pt-6 text-2xl font-semibold tracking-[-0.06em] md:pt-2 md:text-4xl lg:pt-0 lg:text-7xl">
           Grant Programs
         </h1>
-        <div id={GRANTS_PORTAL_IDS.AI_FINDER_MOBILE} />
+        <div id={GRANTS_PORTAL_IDS.AI_FINDER_MOBILE}>
+          <div className="lg:hidden">
+            <AiGrantProgramFinderSkeleton />
+          </div>
+        </div>
         <GrantList />
       </div>
       <AiGrantProgramFinder />
+      {/* <AiGrantProgramFinderSkeleton /> */}
     </HydrationBoundary>
   );
 };
diff --git a/src/shared/components/nav/sections.tsx b/src/shared/components/nav/sections.tsx
index 59a77582..17aebf80 100644
--- a/src/shared/components/nav/sections.tsx
+++ b/src/shared/components/nav/sections.tsx
@@ -1,3 +1,5 @@
+import dynamic from 'next/dynamic';
+
 import { A11Y, HREFS, TEST_IDS } from '@/shared/core/constants';
 import { Brand } from '@/shared/components/brand';
 
@@ -6,6 +8,14 @@ import { GRANTS_PORTAL_IDS } from '@/grants/core/constants';
 import { Bartab } from './bartab';
 import { CloseButton } from './close-button';
 
+const AiGrantProgramFinderSkeleton = dynamic(
+  () =>
+    import(
+      '@/grants/components/ai-grant-program-finder/ai-grant-program-finder-skeleton'
+    ).then((m) => m.AiGrantProgramFinderSkeleton),
+  { ssr: true },
+);
+
 const SECTIONS = [
   {
     label: 'Discover',
@@ -67,7 +77,11 @@ export const NavSections = ({ isMobile }: Props) => {
           borderImageSource:
             'linear-gradient(162.12deg, #EAEAEA -14.01%, rgba(187, 190, 223, 0) 27.11%, rgba(132, 132, 132, 0) 62.3%, rgba(133, 133, 134, 0) 68.01%, #999999 92.7%)',
         }}
-      />
+      >
+        <div className="hidden lg:block">
+          <AiGrantProgramFinderSkeleton />
+        </div>
+      </div>
     </nav>
   );
 };
diff --git a/src/shared/components/nav/xxx.tsx b/src/shared/components/nav/xxx.tsx
new file mode 100644
index 00000000..7607ea50
--- /dev/null
+++ b/src/shared/components/nav/xxx.tsx
@@ -0,0 +1,8 @@
+'use client';
+
+import { useIsMounted } from '@/shared/hooks/use-is-mounted';
+
+export const XXX = () => {
+  const isMounted = useIsMounted();
+  return isMounted ? null : <p>FAKE LOADER</p>;
+};

From ed47358d300f8b50b17fa8869f7c37b8ccd6e702 Mon Sep 17 00:00:00 2001
From: John Ballesteros <johnshift.dev@gmail.com>
Date: Fri, 30 Aug 2024 15:13:06 +0800
Subject: [PATCH 3/4] refactor: cleanup, move wrapper class inside skeleton

---
 .../ai-grant-program-finder-skeleton.tsx      | 31 +++++++++++++------
 src/grants/pages/grant-list-page.tsx          |  1 -
 src/shared/components/nav/sections.tsx        |  4 +--
 src/shared/components/nav/xxx.tsx             |  8 -----
 4 files changed, 23 insertions(+), 21 deletions(-)
 delete mode 100644 src/shared/components/nav/xxx.tsx

diff --git a/src/grants/components/ai-grant-program-finder/ai-grant-program-finder-skeleton.tsx b/src/grants/components/ai-grant-program-finder/ai-grant-program-finder-skeleton.tsx
index 3554a69f..7eb1bfed 100644
--- a/src/grants/components/ai-grant-program-finder/ai-grant-program-finder-skeleton.tsx
+++ b/src/grants/components/ai-grant-program-finder/ai-grant-program-finder-skeleton.tsx
@@ -2,19 +2,32 @@
 
 import { Skeleton } from '@nextui-org/react';
 
+import { cn } from '@/shared/utils/cn';
 import { useIsMounted } from '@/shared/hooks/use-is-mounted';
 
-export const AiGrantProgramFinderSkeleton = () => {
+interface Props {
+  isDesktop?: boolean;
+}
+
+export const AiGrantProgramFinderSkeleton = ({ isDesktop }: Props) => {
   const isMounted = useIsMounted();
+
   return isMounted ? null : (
-    <div className="mt-5 flex h-full flex-col gap-4 rounded-20 border border-white/10 p-4 md:mt-6 lg:mt-0">
-      <h2 className="text-xl font-semibold">AI Grant Program Finder</h2>
-      <span className="text-sm">
-        Our AI assistant will help you identify which grant program suits your
-        application best
-      </span>
-      <Skeleton className="min-h-[88px] grow rounded-lg" />
-      <Skeleton className="h-10 w-full rounded-lg" />
+    <div
+      className={cn('h-full', {
+        'lg:hidden': !isDesktop,
+        'hidden lg:block': isDesktop,
+      })}
+    >
+      <div className="mt-5 flex h-full flex-col gap-4 rounded-20 border border-white/10 p-4 md:mt-6 lg:mt-0">
+        <h2 className="text-xl font-semibold">AI Grant Program Finder</h2>
+        <span className="text-sm">
+          Our AI assistant will help you identify which grant program suits your
+          application best
+        </span>
+        <Skeleton className="min-h-[88px] grow rounded-lg" />
+        <Skeleton className="h-10 w-full rounded-lg" />
+      </div>
     </div>
   );
 };
diff --git a/src/grants/pages/grant-list-page.tsx b/src/grants/pages/grant-list-page.tsx
index 7c7209e7..6361128d 100644
--- a/src/grants/pages/grant-list-page.tsx
+++ b/src/grants/pages/grant-list-page.tsx
@@ -59,7 +59,6 @@ export const GrantListPage = async () => {
         <GrantList />
       </div>
       <AiGrantProgramFinder />
-      {/* <AiGrantProgramFinderSkeleton /> */}
     </HydrationBoundary>
   );
 };
diff --git a/src/shared/components/nav/sections.tsx b/src/shared/components/nav/sections.tsx
index 17aebf80..ab0909f1 100644
--- a/src/shared/components/nav/sections.tsx
+++ b/src/shared/components/nav/sections.tsx
@@ -78,9 +78,7 @@ export const NavSections = ({ isMobile }: Props) => {
             'linear-gradient(162.12deg, #EAEAEA -14.01%, rgba(187, 190, 223, 0) 27.11%, rgba(132, 132, 132, 0) 62.3%, rgba(133, 133, 134, 0) 68.01%, #999999 92.7%)',
         }}
       >
-        <div className="hidden lg:block">
-          <AiGrantProgramFinderSkeleton />
-        </div>
+        <AiGrantProgramFinderSkeleton isDesktop />
       </div>
     </nav>
   );
diff --git a/src/shared/components/nav/xxx.tsx b/src/shared/components/nav/xxx.tsx
deleted file mode 100644
index 7607ea50..00000000
--- a/src/shared/components/nav/xxx.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-'use client';
-
-import { useIsMounted } from '@/shared/hooks/use-is-mounted';
-
-export const XXX = () => {
-  const isMounted = useIsMounted();
-  return isMounted ? null : <p>FAKE LOADER</p>;
-};

From 23cc198837aec752afdb0375d9359109091d8a5a Mon Sep 17 00:00:00 2001
From: John Ballesteros <johnshift.dev@gmail.com>
Date: Fri, 30 Aug 2024 15:17:58 +0800
Subject: [PATCH 4/4] refactor: more cleanup

---
 .../client-content.tsx                        | 80 -------------------
 .../components/grant-list/ai-grant-list.tsx   |  2 -
 src/grants/pages/grant-list-page.tsx          |  2 -
 3 files changed, 84 deletions(-)
 delete mode 100644 src/grants/components/ai-grant-program-finder/client-content.tsx

diff --git a/src/grants/components/ai-grant-program-finder/client-content.tsx b/src/grants/components/ai-grant-program-finder/client-content.tsx
deleted file mode 100644
index fe3f9ba1..00000000
--- a/src/grants/components/ai-grant-program-finder/client-content.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-'use client';
-
-import { useState } from 'react';
-import { createPortal } from 'react-dom';
-
-import { Button, Textarea } from '@nextui-org/react';
-import { useAtom, useAtomValue } from 'jotai';
-
-import { useIsMounted } from '@/shared/hooks/use-is-mounted';
-import { useIsDesktop } from '@/shared/hooks/use-media-query';
-
-import { GRANTS_PORTAL_IDS } from '@/grants/core/constants';
-import {
-  aiGrantFinderPending,
-  aiGrantFinderQueryAtom,
-} from '@/grants/core/atoms';
-
-export const ClientContent = () => {
-  const isMounted = useIsMounted();
-  const isDesktop = useIsDesktop();
-
-  const portalId = isDesktop
-    ? GRANTS_PORTAL_IDS.AI_FINDER_DESKTOP
-    : GRANTS_PORTAL_IDS.AI_FINDER_MOBILE;
-
-  const portal =
-    typeof window === 'undefined' ? null : document.getElementById(portalId);
-
-  const isPending = useAtomValue(aiGrantFinderPending);
-  const [aiQuery, setAiQuery] = useAtom(aiGrantFinderQueryAtom);
-
-  const [aiQueryInput, setAiQueryInput] = useState('');
-  const onChangeAiQuery: React.ChangeEventHandler<HTMLInputElement> = (e) => {
-    setAiQueryInput(e.target.value);
-  };
-
-  const onFind = () => {
-    setAiQuery(aiQueryInput);
-  };
-
-  const onClear = () => {
-    setAiQuery('');
-    setAiQueryInput('');
-  };
-
-  const buttonText = !!aiQuery && !isPending ? 'Reset' : 'Find';
-  const onClick = aiQuery ? onClear : onFind;
-
-  if (!isMounted || !portal) return null;
-
-  return createPortal(
-    <div className="mt-5 flex h-full flex-col gap-4 rounded-20 border border-white/10 p-4 md:mt-6 lg:mt-0">
-      <h2 className="text-xl font-semibold">AI Grant Program Finder</h2>
-      <span className="text-sm">
-        Our AI assistant will help you identify which grant program suits your
-        application best
-      </span>
-      <Textarea
-        isDisabled={isPending}
-        value={aiQuery || aiQueryInput}
-        onChange={onChangeAiQuery}
-        classNames={{
-          base: 'grow',
-          inputWrapper: 'h-full bg-white/5 grow rounded-lg',
-          input: 'placeholder:text-white placeholder:text-sm text-base',
-        }}
-        placeholder="Describe your project here"
-      />
-      <Button
-        isLoading={isPending}
-        isDisabled={!aiQueryInput && !aiQuery}
-        className="is-active mx-auto w-full rounded-lg text-sm font-semibold text-black"
-        onClick={onClick}
-      >
-        <span>{buttonText}</span>
-      </Button>
-    </div>,
-    portal,
-  );
-};
diff --git a/src/grants/components/grant-list/ai-grant-list.tsx b/src/grants/components/grant-list/ai-grant-list.tsx
index 8cc4515c..1dbfb387 100644
--- a/src/grants/components/grant-list/ai-grant-list.tsx
+++ b/src/grants/components/grant-list/ai-grant-list.tsx
@@ -8,8 +8,6 @@ import { GrantListItem } from '@/grants/components/grant-list/grant-list-item';
 import { useAiGrantList } from '@/grants/components/grant-list/use-ai-grant-list';
 
 export const AiGrantList = () => {
-  // TODO: JOB-682
-
   const { grants, error, inViewRef, hasNextPage, isPending } = useAiGrantList();
 
   const lastItem = useMemo(() => {
diff --git a/src/grants/pages/grant-list-page.tsx b/src/grants/pages/grant-list-page.tsx
index 6361128d..364d9605 100644
--- a/src/grants/pages/grant-list-page.tsx
+++ b/src/grants/pages/grant-list-page.tsx
@@ -19,8 +19,6 @@ const AiGrantProgramFinderSkeleton = dynamic(
   { ssr: true },
 );
 
-// TODO: Check if need to use search params(filter related), if so need to force dynamic
-
 export const GrantListPage = async () => {
   const queryClient = getQueryClient();