From ddf0e3c5ee93ecf92e5c10f5faf83de45f878e38 Mon Sep 17 00:00:00 2001
From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Fri, 5 Dec 2025 07:44:22 +0000
Subject: [PATCH 1/2] feat(web): add Load More button to OSS friends page for
 efficient loading

Co-Authored-By: john@hyprnote.com <john@hyprnote.com>
---
 apps/web/src/routes/_view/oss-friends.tsx | 44 +++++++++++++++++++++--
 1 file changed, 42 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/routes/_view/oss-friends.tsx b/apps/web/src/routes/_view/oss-friends.tsx
index e54eb2385a..db4ec1f304 100644
--- a/apps/web/src/routes/_view/oss-friends.tsx
+++ b/apps/web/src/routes/_view/oss-friends.tsx
@@ -40,8 +40,12 @@ export const Route = createFileRoute("/_view/oss-friends")({
   }),
 });
 
+const INITIAL_DISPLAY_COUNT = 12;
+const LOAD_MORE_COUNT = 12;
+
 function Component() {
   const [search, setSearch] = useState("");
+  const [displayCount, setDisplayCount] = useState(INITIAL_DISPLAY_COUNT);
 
   const filteredFriends = useMemo(() => {
     if (!search.trim()) return allOssFriends;
@@ -53,6 +57,16 @@ function Component() {
     );
   }, [search]);
 
+  const isSearching = search.trim().length > 0;
+  const displayedFriends = isSearching
+    ? filteredFriends
+    : filteredFriends.slice(0, displayCount);
+  const hasMore = !isSearching && displayCount < filteredFriends.length;
+
+  const handleLoadMore = () => {
+    setDisplayCount((prev) => prev + LOAD_MORE_COUNT);
+  };
+
   return (
     <div
       className="bg-linear-to-b from-white via-stone-50/20 to-white min-h-screen"
@@ -61,7 +75,11 @@ function Component() {
       <div className="max-w-6xl mx-auto border-x border-neutral-100 bg-white">
         <HeroSection search={search} onSearchChange={setSearch} />
         <SlashSeparator />
-        <FriendsSection friends={filteredFriends} />
+        <FriendsSection
+          friends={displayedFriends}
+          hasMore={hasMore}
+          onLoadMore={handleLoadMore}
+        />
         <SlashSeparator />
         <JoinSection />
       </div>
@@ -115,7 +133,15 @@ function HeroSection({
   );
 }
 
-function FriendsSection({ friends }: { friends: typeof allOssFriends }) {
+function FriendsSection({
+  friends,
+  hasMore,
+  onLoadMore,
+}: {
+  friends: typeof allOssFriends;
+  hasMore: boolean;
+  onLoadMore: () => void;
+}) {
   return (
     <section>
       <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-px bg-neutral-200">
@@ -166,6 +192,20 @@ function FriendsSection({ friends }: { friends: typeof allOssFriends }) {
           </a>
         ))}
       </div>
+      {hasMore && (
+        <div className="flex justify-center py-8 bg-white">
+          <button
+            onClick={onLoadMore}
+            className={cn([
+              "inline-flex items-center justify-center gap-2 px-6 py-3 text-base font-medium rounded-full",
+              "border border-neutral-200 text-neutral-700 bg-white",
+              "hover:bg-stone-50 hover:border-stone-300 transition-colors",
+            ])}
+          >
+            Load more
+          </button>
+        </div>
+      )}
     </section>
   );
 }

From 546ab5baddcad3c88b0c37f71d160b43ed13231e Mon Sep 17 00:00:00 2001
From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Fri, 5 Dec 2025 08:16:58 +0000
Subject: [PATCH 2/2] style(web): update Load More button with white-ish linear
 gradient

Co-Authored-By: john@hyprnote.com <john@hyprnote.com>
---
 apps/web/src/routes/_view/oss-friends.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/routes/_view/oss-friends.tsx b/apps/web/src/routes/_view/oss-friends.tsx
index db4ec1f304..b8834e194e 100644
--- a/apps/web/src/routes/_view/oss-friends.tsx
+++ b/apps/web/src/routes/_view/oss-friends.tsx
@@ -198,8 +198,9 @@ function FriendsSection({
             onClick={onLoadMore}
             className={cn([
               "inline-flex items-center justify-center gap-2 px-6 py-3 text-base font-medium rounded-full",
-              "border border-neutral-200 text-neutral-700 bg-white",
-              "hover:bg-stone-50 hover:border-stone-300 transition-colors",
+              "border border-neutral-200 text-neutral-700",
+              "bg-linear-to-t from-stone-100 to-white",
+              "hover:from-stone-200 hover:to-stone-50 hover:border-stone-300 transition-all",
             ])}
           >
             Load more