From b5759ddcd5f6ac3d4ecc3aeff8e9d7b2484d7f46 Mon Sep 17 00:00:00 2001
From: vjymisal0 <misalvijay153@gmail.com>
Date: Tue, 1 Sep 2026 19:58:16 +0530
Subject: [PATCH] feat: show empty state for empty search results

---
 components/OrganizationList.tsx | 30 +++++++++++++++++++-----------
 components/RepositoryList.tsx   | 30 +++++++++++++++++++-----------
 2 files changed, 38 insertions(+), 22 deletions(-)

diff --git a/components/OrganizationList.tsx b/components/OrganizationList.tsx
index be9de6dd..c42f0771 100644
--- a/components/OrganizationList.tsx
+++ b/components/OrganizationList.tsx
@@ -41,6 +41,7 @@ export const OrganizationList = ({ organizations }: OrganizationListProps) => {
 
   const loadMoreItems = () => setItems(items + itemsPerScroll);
   const hasMoreItems = items < filteredOrganizations.length;
+  const isEmptyState = filteredOrganizations.length === 0;
 
   return (
     <main className="repoWrap">
@@ -66,19 +67,26 @@ export const OrganizationList = ({ organizations }: OrganizationListProps) => {
             className="org-list-wrap"
             span={{ xsmall: 12, small: 12, medium: 12, large: 7, xlarge: 9 }}
           >
-            <InfiniteScroll
-              dataLength={items}
-              next={loadMoreItems}
-              hasMore={hasMoreItems}
-              loader={<Loader />}
-            >
-              {filteredOrganizations.slice(0, items).map((org) => (
-                <OrganizationItem key={org.id} organization={org} />
-              ))}
-            </InfiniteScroll>
+            {isEmptyState ? (
+              <div className="p-6 rounded-md border border-slate-200 bg-white text-slate-700">
+                <p className="font-semibold">No results found.</p>
+                <p className="mt-2">Try changing your search term or filters.</p>
+              </div>
+            ) : (
+              <InfiniteScroll
+                dataLength={items}
+                next={loadMoreItems}
+                hasMore={hasMoreItems}
+                loader={<Loader />}
+              >
+                {filteredOrganizations.slice(0, items).map((org) => (
+                  <OrganizationItem key={org.id} organization={org} />
+                ))}
+              </InfiniteScroll>
+            )}
           </Grid.Column>
         </Grid>
       </div>
     </main>
   );
-};
\ No newline at end of file
+};
diff --git a/components/RepositoryList.tsx b/components/RepositoryList.tsx
index 34bc5488..d0064ab9 100644
--- a/components/RepositoryList.tsx
+++ b/components/RepositoryList.tsx
@@ -60,6 +60,7 @@ export const RepositoryList = ({ repositories, filter }: RepositoryListProps) =>
 
   const loadMoreItems = () => setItems(items + itemsPerScroll);
   const hasMoreItems = items < filteredRepositories.length;
+  const isEmptyState = filteredRepositories.length === 0;
 
   return (
     <main className="repoWrap">
@@ -78,19 +79,26 @@ export const RepositoryList = ({ repositories, filter }: RepositoryListProps) =>
             className="repo-list-wrap"
             span={{ xsmall: 12, small: 12, medium: 12, large: 7, xlarge: 9 }}
           >
-            <InfiniteScroll
-              dataLength={items}
-              next={loadMoreItems}
-              hasMore={hasMoreItems}
-              loader={<Loader />}
-            >
-              {filteredRepositories.slice(0, items).map((repository) => (
-                <RepositoryItem key={repository.id} repository={repository} />
-              ))}
-            </InfiniteScroll>
+            {isEmptyState ? (
+              <div className="p-6 rounded-md border border-slate-200 bg-white text-slate-700">
+                <p className="font-semibold">No results found.</p>
+                <p className="mt-2">Try changing your search term or filters.</p>
+              </div>
+            ) : (
+              <InfiniteScroll
+                dataLength={items}
+                next={loadMoreItems}
+                hasMore={hasMoreItems}
+                loader={<Loader />}
+              >
+                {filteredRepositories.slice(0, items).map((repository) => (
+                  <RepositoryItem key={repository.id} repository={repository} />
+                ))}
+              </InfiniteScroll>
+            )}
           </Grid.Column>
         </Grid>
       </div>
     </main>
   );
-};
\ No newline at end of file
+};