From c8ad5d5dc333e6398601fba8f9a47eade740af4c Mon Sep 17 00:00:00 2001
From: Anjali Kumari <anjaliiiiiii45@gmail.com>
Date: Fri, 5 Jun 2026 18:07:04 +0530
Subject: [PATCH] feat: add empty state component for offline podcasts screen
 (#1078)

- Added NoOfflinePodcastState component in EmptyStates.tsx
- Title: No Offline Podcasts Yet
- Description: Download podcasts to listen anytime, even without an internet connection
- Added Browse Podcasts CTA button navigating to Podcast discovery screen
- Replaced blank screen with dedicated empty state in OfflinePodcastList.tsx
---
 frontend/src/components/EmptyStates.tsx     | 10 ++++++++++
 frontend/src/screens/OfflinePodcastList.tsx |  3 ++-
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/EmptyStates.tsx b/frontend/src/components/EmptyStates.tsx
index b37c5271..ea43e60d 100644
--- a/frontend/src/components/EmptyStates.tsx
+++ b/frontend/src/components/EmptyStates.tsx
@@ -189,6 +189,16 @@ export const NoPodcastState = ({ onRefresh }: { onRefresh?: () => void }) => (
   />
 );
 
+export const NoOfflinePodcastState = ({ onBrowse }: { onBrowse?: () => void }) => (
+  <BaseEmptyState
+    iconEmoji="🎙️"
+    title="No Offline Podcasts Yet"
+    description="Download podcasts to listen anytime, even without an internet connection."
+    actionText={onBrowse ? "Browse Podcasts" : undefined}
+    onAction={onBrowse}
+  />
+);
+
 export const NoNotificationState = ({ onRefresh }: { onRefresh?: () => void }) => {
   const isDarkMode = useColorScheme() === 'dark';
   return (
diff --git a/frontend/src/screens/OfflinePodcastList.tsx b/frontend/src/screens/OfflinePodcastList.tsx
index 4e140b35..0d7b112e 100644
--- a/frontend/src/screens/OfflinePodcastList.tsx
+++ b/frontend/src/screens/OfflinePodcastList.tsx
@@ -4,6 +4,7 @@ import {OfflinePodcastListProp, PodcastData} from '../type';
 import {deleteFromDownloads, msToTime, readDownloadedPodcasts} from '../helper/Utils';
 import PodcastCard from '../components/PodcastCard';
 import PodcastEmptyComponent from '../components/PodcastEmptyComponent';
+import {NoOfflinePodcastState} from '../components/EmptyStates';
 import {hp} from '../helper/Metric';
 import {ON_PRIMARY_COLOR} from '../helper/Theme';
 import Snackbar from 'react-native-snackbar';
@@ -113,7 +114,7 @@ export default function OfflinePodcastList({
         data={podcasts}
         keyExtractor={item => item._id.toString()}
         renderItem={renderItem}
-        ListEmptyComponent={<PodcastEmptyComponent />}
+        ListEmptyComponent={<NoOfflinePodcastState onBrowse={() => navigation.navigate('Podcast')} />}
       />
       <CreatePlaylist
         visible={playlistModalOpen}