Serve cached podcast episodes before refreshing

src/services/FeedCacheService.ts

@@ -90,22 +90,24 @@ export function getCachedEpisodes(
 	feed: PodcastFeed,
 	maxAgeMs: number = DEFAULT_TTL_MS,
 ): Episode[] | null {
-	const store = loadCache();
-	const cacheKey = getFeedKey(feed);
-	const cachedValue = store[cacheKey];
+	const cachedEpisodesWithStatus = getCachedEpisodesWithStatus(
+		feed,
+		maxAgeMs,
+	);
 
-	if (!cachedValue) {
+	if (!cachedEpisodesWithStatus) {
 		return null;
 	}
 
-	const isExpired = Date.now() - cachedValue.updatedAt > maxAgeMs;
-	if (isExpired) {
+	if (cachedEpisodesWithStatus.isExpired) {
+		const store = loadCache();
+		const cacheKey = getFeedKey(feed);
 		delete store[cacheKey];
 		persistCache();
 		return null;
 	}
 
-	return cachedValue.episodes.map(deserializeEpisode);
+	return cachedEpisodesWithStatus.episodes;
 }
 
 export function setCachedEpisodes(feed: PodcastFeed, episodes: Episode[]): void {
@@ -135,3 +137,26 @@ export function clearFeedCache(): void {
 		console.error("Failed to clear feed cache:", error);
 	}
 }
+
+export function getCachedEpisodesWithStatus(
+	feed: PodcastFeed,
+	maxAgeMs: number = DEFAULT_TTL_MS,
+):
+	| {
+			episodes: Episode[];
+			isExpired: boolean;
+	  }
+	| null {
+	const store = loadCache();
+	const cacheKey = getFeedKey(feed);
+	const cachedValue = store[cacheKey];
+
+	if (!cachedValue) {
+		return null;
+	}
+
+	return {
+		episodes: cachedValue.episodes.map(deserializeEpisode),
+		isExpired: Date.now() - cachedValue.updatedAt > maxAgeMs,
+	};
+}

src/ui/PodcastView/PodcastView.svelte

@@ -30,6 +30,7 @@
 	import spawnEpisodeContextMenu from "./spawnEpisodeContextMenu";
 	import {
 		getCachedEpisodes,
+		getCachedEpisodesWithStatus,
 		setCachedEpisodes,
 	} from "src/services/FeedCacheService";
 	import { get } from "svelte/store";
@@ -40,6 +41,7 @@
 	let displayedEpisodes: Episode[] = [];
 	let displayedPlaylists: Playlist[] = [];
 	let latestEpisodes: Episode[] = [];
+	const FEED_REFRESH_CONCURRENCY = 3;
 
 	onMount(() => {
 		const unsubscribePlaylists = playlists.subscribe((pl) => {
@@ -48,6 +50,7 @@
 
 		const unsubscribeSavedFeeds = savedFeeds.subscribe((storeValue) => {
 			feeds = Object.values(storeValue);
+			void hydrateAndRefreshFeeds();
 		});
 
 		const unsubscribeLatestEpisodes = latestEpisodesStore.subscribe(
@@ -60,31 +63,29 @@
 			},
 		);
 
-		(async () => {
-			await fetchEpisodesInAllFeeds(feeds);
-
-			if (!selectedFeed) {
-				displayedEpisodes = latestEpisodes;
-			}
-		})();
-
 		return () => {
 			unsubscribeLatestEpisodes();
 			unsubscribeSavedFeeds();
 			unsubscribePlaylists();
 		};
 	});
 
+	function getFeedCacheSettings() {
+		const pluginInstance = get(plugin);
+		const feedCacheSettings = pluginInstance?.settings?.feedCache;
+
+		return {
+			cacheEnabled: feedCacheSettings?.enabled !== false,
+			cacheTtlMs:
+				Math.max(1, feedCacheSettings?.ttlHours ?? 6) * 60 * 60 * 1000,
+		};
+	}
+
 	async function fetchEpisodes(
 		feed: PodcastFeed,
 		useCache: boolean = true,
 	): Promise<Episode[]> {
-
-		const pluginInstance = get(plugin);
-		const feedCacheSettings = pluginInstance?.settings?.feedCache;
-		const cacheEnabled = feedCacheSettings?.enabled !== false;
-		const cacheTtlMs =
-			Math.max(1, feedCacheSettings?.ttlHours ?? 6) * 60 * 60 * 1000;
+		const { cacheEnabled, cacheTtlMs } = getFeedCacheSettings();
 
 		const cachedEpisodesInFeed = $episodeCache[feed.title];
 
@@ -128,14 +129,95 @@
 		}
 	}
 
-	function fetchEpisodesInAllFeeds(
-		feedsToSearch: PodcastFeed[]
-	): Promise<Episode[]> {
-		return Promise.all(
-			feedsToSearch.map((feed) => fetchEpisodes(feed))
-		).then((episodes) => {
-			return episodes.flat();
-		});
+	async function hydrateAndRefreshFeeds() {
+		if (!feeds.length) {
+			return;
+		}
+
+		const { cacheEnabled, cacheTtlMs } = getFeedCacheSettings();
+
+		const cachedFeeds = cacheEnabled
+			? feeds
+					.map((feed) => {
+						const cached = getCachedEpisodesWithStatus(feed, cacheTtlMs);
+						if (!cached?.episodes.length) {
+							return null;
+						}
+
+						return { feed, ...cached };
+					})
+					.filter(Boolean) as Array<{
+						feed: PodcastFeed;
+						episodes: Episode[];
+						isExpired: boolean;
+					}>
+			: [];
+
+		if (cachedFeeds.length) {
+			episodeCache.update((cache) => {
+				const updatedCache = { ...cache };
+
+				for (const { feed, episodes } of cachedFeeds) {
+					if (updatedCache[feed.title]?.length) {
+						continue;
+					}
+
+					updatedCache[feed.title] = episodes;
+				}
+
+				return updatedCache;
+			});
+
+			if (!selectedFeed && !selectedPlaylist) {
+				displayedEpisodes = latestEpisodes;
+			}
+		}
+
+		const feedsToRefresh = cacheEnabled
+			? feeds.filter((feed) => {
+					const feedKey = feed.url ?? feed.title;
+					const cached = cachedFeeds.find(
+						({ feed: cachedFeed }) =>
+							(cachedFeed.url ?? cachedFeed.title) === feedKey,
+					);
+
+					return !cached || cached.isExpired;
+			  })
+			: feeds;
+
+		if (!feedsToRefresh.length) {
+			if (!selectedFeed && !selectedPlaylist) {
+				displayedEpisodes = latestEpisodes;
+			}
+			return;
+		}
+
+		void refreshFeedsWithLimit(feedsToRefresh);
+	}
+
+	async function refreshFeedsWithLimit(feedsToRefresh: PodcastFeed[]) {
+		const queueToRefresh = [...feedsToRefresh];
+		const workers = Array.from(
+			{ length: FEED_REFRESH_CONCURRENCY },
+			async () => {
+				while (queueToRefresh.length) {
+					const feed = queueToRefresh.shift();
+					if (!feed) break;
+
+					await fetchEpisodes(feed, false);
+				}
+			},
+		);
+
+		try {
+			await Promise.all(workers);
+		} catch (error) {
+			console.error("Failed to refresh saved feeds:", error);
+		} finally {
+			if (!selectedFeed && !selectedPlaylist) {
+				displayedEpisodes = latestEpisodes;
+			}
+		}
 	}
 
 	async function handleClickPodcast(