From 3ffa198563e8502184ad869736a3d54a84d8745f Mon Sep 17 00:00:00 2001
From: Cesare Naldi <naldi.cesare@gmail.com>
Date: Wed, 15 May 2024 20:56:33 +0200
Subject: [PATCH] feat: add React Suspense support to useProfiles hook

---
 .changeset/giant-mirrors-count.md         |  7 +++
 examples/web/src/profiles/UseProfiles.tsx |  9 +--
 packages/react/src/profile/useProfiles.ts | 76 ++++++++++++++++-------
 3 files changed, 60 insertions(+), 32 deletions(-)
 create mode 100644 .changeset/giant-mirrors-count.md

diff --git a/.changeset/giant-mirrors-count.md b/.changeset/giant-mirrors-count.md
new file mode 100644
index 0000000000..f5c56659f4
--- /dev/null
+++ b/.changeset/giant-mirrors-count.md
@@ -0,0 +1,7 @@
+---
+"@lens-protocol/react": minor
+"@lens-protocol/react-native": minor
+"@lens-protocol/react-web": minor
+---
+
+**feat:** add React Suspense support to `useProfiles` hook
diff --git a/examples/web/src/profiles/UseProfiles.tsx b/examples/web/src/profiles/UseProfiles.tsx
index 96e08c440c..aba8bb924f 100644
--- a/examples/web/src/profiles/UseProfiles.tsx
+++ b/examples/web/src/profiles/UseProfiles.tsx
@@ -1,15 +1,11 @@
 import { profileId, useProfiles } from '@lens-protocol/react-web';
 
-import { ErrorMessage } from '../components/error/ErrorMessage';
-import { Loading } from '../components/loading/Loading';
 import { useInfiniteScroll } from '../hooks/useInfiniteScroll';
 import { ProfileCard } from './components/ProfileCard';
 
 export function UseProfiles() {
   const {
     data: profiles,
-    error,
-    loading,
     hasMore,
     observeRef,
   } = useInfiniteScroll(
@@ -17,13 +13,10 @@ export function UseProfiles() {
       where: {
         profileIds: [profileId('0x01'), profileId('0x02'), profileId('0x03'), profileId('0x04')],
       },
+      suspense: true,
     }),
   );
 
-  if (loading) return <Loading />;
-
-  if (error) return <ErrorMessage error={error} />;
-
   return (
     <div>
       <h1>
diff --git a/packages/react/src/profile/useProfiles.ts b/packages/react/src/profile/useProfiles.ts
index d243bafe35..6b3e5dd44b 100644
--- a/packages/react/src/profile/useProfiles.ts
+++ b/packages/react/src/profile/useProfiles.ts
@@ -1,11 +1,18 @@
 import {
   Profile,
+  ProfilesDocument,
   ProfilesRequest,
-  useProfiles as useProfilesHook,
+  ProfilesRequestWhere,
 } from '@lens-protocol/api-bindings';
 
 import { useLensApolloClient } from '../helpers/arguments';
-import { PaginatedArgs, PaginatedReadResult, usePaginatedReadResult } from '../helpers/reads';
+import { PaginatedArgs, PaginatedReadResult } from '../helpers/reads';
+import {
+  SuspendablePaginatedResult,
+  SuspenseEnabled,
+  SuspensePaginatedResult,
+  useSuspendablePaginatedQuery,
+} from '../helpers/suspense';
 import { useFragmentVariables } from '../helpers/variables';
 
 /**
@@ -13,18 +20,18 @@ import { useFragmentVariables } from '../helpers/variables';
  */
 export type UseProfilesArgs = PaginatedArgs<ProfilesRequest>;
 
+export type { ProfilesRequest, ProfilesRequestWhere };
+
 /**
- * `useProfiles` is a paginated hook that lets you fetch profiles based on a set of filters.
+ * {@link useProfiles} hook arguments with Suspense support
  *
- * @example
- * ```ts
- * const { data, loading, error } = useProfiles({
- * ```
- *
- * @category Profiles
- * @group Hooks
+ * @experimental This API can change without notice
+ */
+export type UseSuspenseProfilesArgs = SuspenseEnabled<UseProfilesArgs>;
+
+/**
+ * Retrieves a paginated list of profiles, filtered according to specified criteria.
  *
- * @example
  * Fetch profiles by handles
  * ```tsx
  * const { data, loading, error } = useProfiles({
@@ -34,7 +41,6 @@ export type UseProfilesArgs = PaginatedArgs<ProfilesRequest>;
  * });
  * ```
  *
- * @example
  * Fetch profiles by ids
  * ```tsx
  * const { data, loading, error } = useProfiles({
@@ -44,7 +50,6 @@ export type UseProfilesArgs = PaginatedArgs<ProfilesRequest>;
  * });
  * ```
  *
- * @example
  * Fetch profiles by owner addresses
  * ```tsx
  * const { data, loading, error } = useProfiles({
@@ -54,7 +59,6 @@ export type UseProfilesArgs = PaginatedArgs<ProfilesRequest>;
  * });
  * ```
  *
- * @example
  * Fetch profiles who commented on a publication
  * ```tsx
  * const { data, loading, error } = useProfiles({
@@ -64,7 +68,6 @@ export type UseProfilesArgs = PaginatedArgs<ProfilesRequest>;
  * });
  * ```
  *
- * @example
  * Fetch profiles who mirrored a publication
  * ```tsx
  * const { data, loading, error } = useProfiles({
@@ -74,7 +77,6 @@ export type UseProfilesArgs = PaginatedArgs<ProfilesRequest>;
  * });
  * ```
  *
- * @example
  * Fetch profiles who quoted a publication
  * ```tsx
  * const { data, loading, error } = useProfiles({
@@ -83,13 +85,39 @@ export type UseProfilesArgs = PaginatedArgs<ProfilesRequest>;
  *   },
  * });
  * ```
+ *
+ * @category Profiles
+ * @group Hooks
  */
-export function useProfiles(args: UseProfilesArgs): PaginatedReadResult<Profile[]> {
-  return usePaginatedReadResult(
-    useProfilesHook(
-      useLensApolloClient({
-        variables: useFragmentVariables(args),
-      }),
-    ),
-  );
+export function useProfiles(args: UseProfilesArgs): PaginatedReadResult<Profile[]>;
+
+/**
+ * Retrieves a paginated list of profiles, filtered according to specified criteria.
+ *
+ * This signature supports [React Suspense](https://react.dev/reference/react/Suspense).
+ *
+ * ```tsx
+ * const { data } = useProfiles({
+ *   where: { ... },
+ *   suspense: true,
+ * });
+ * ```
+ *
+ * @experimental This API can change without notice
+ * @category Profiles
+ * @group Hooks
+ */
+export function useProfiles(args: UseSuspenseProfilesArgs): SuspensePaginatedResult<Profile[]>;
+
+export function useProfiles({
+  suspense = false,
+  ...args
+}: UseProfilesArgs & { suspense?: boolean }): SuspendablePaginatedResult<Profile[]> {
+  return useSuspendablePaginatedQuery({
+    suspense,
+    query: ProfilesDocument,
+    options: useLensApolloClient({
+      variables: useFragmentVariables(args),
+    }),
+  });
 }