Improve podcast loading feedback

Author: chhoumann

src/ui/PodcastView/EpisodeList.svelte

@@ -1,14 +1,16 @@
 <script lang="ts">
 	import type { Episode } from "src/types/Episode";
-	import { createEventDispatcher, onMount } from "svelte";
+	import { createEventDispatcher } from "svelte";
 	import EpisodeListItem from "./EpisodeListItem.svelte";
 	import { playedEpisodes } from "src/store";
 	import Icon from "../obsidian/Icon.svelte";
 	import Text from "../obsidian/Text.svelte";
+	import Loading from "./Loading.svelte";
 
 	export let episodes: Episode[] = [];
 	export let showThumbnails: boolean = false;
 	export let showListMenu: boolean = true;
+	export let isLoading: boolean = false;
 	let hidePlayedEpisodes: boolean = false;
 	let searchInputQuery: string = "";
 
@@ -64,7 +66,13 @@
 	{/if}
 
 	<div class="podcast-episode-list">
-		{#if episodes.length === 0}
+		{#if isLoading}
+			<div class="episode-list-loading" role="status" aria-live="polite">
+				<Loading />
+				<span>Fetching episodes...</span>
+			</div>
+		{/if}
+		{#if episodes.length === 0 && !isLoading}
 			<p>No episodes found.</p>
 		{/if}
 		{#each episodes as episode}
@@ -114,4 +122,13 @@
 		width: 100%;
 		margin-bottom: 0.5rem;
 	}
+
+	.episode-list-loading {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: 0.75rem;
+		padding: 1rem 0;
+		color: var(--text-muted);
+	}
 </style>

src/ui/PodcastView/PodcastView.integration.test.ts

@@ -1,4 +1,4 @@
-import { fireEvent, render, screen } from "@testing-library/svelte";
+import { fireEvent, render, screen, waitFor } from "@testing-library/svelte";
 import { get } from "svelte/store";
 import {
 	afterEach,
@@ -144,4 +144,89 @@ describe("PodcastView integration flow", () => {
 			expect.objectContaining({ path: expectedPath }),
 		);
 	});
+
+	test("shows loading state while fetching and streams episodes per feed", async () => {
+		const secondFeed: PodcastFeed = {
+			title: "Second Podcast",
+			url: "https://pod.example.com/feed-two.xml",
+			artworkUrl: "https://pod.example.com/art-two.jpg",
+		};
+
+		const firstEpisode: Episode = {
+			title: "Episode A",
+			streamUrl: "https://pod.example.com/a.mp3",
+			url: "https://pod.example.com/a",
+			description: "Episode A description",
+			content: "<p>Episode A content</p>",
+			podcastName: testFeed.title,
+			artworkUrl: testFeed.artworkUrl,
+			episodeDate: new Date("2024-02-01T00:00:00.000Z"),
+		};
+
+		const secondEpisode: Episode = {
+			title: "Episode B",
+			streamUrl: "https://pod.example.com/b.mp3",
+			url: "https://pod.example.com/b",
+			description: "Episode B description",
+			content: "<p>Episode B content</p>",
+			podcastName: secondFeed.title,
+			artworkUrl: secondFeed.artworkUrl,
+			episodeDate: new Date("2024-01-15T00:00:00.000Z"),
+		};
+
+		let resolveFirstFeed!: (value: Episode[]) => void;
+		let resolveSecondFeed!: (value: Episode[]) => void;
+
+		mockGetEpisodes
+			.mockImplementationOnce(
+				() =>
+					new Promise<Episode[]>((resolve) => {
+						resolveFirstFeed = resolve;
+					}),
+			)
+			.mockImplementationOnce(
+				() =>
+					new Promise<Episode[]>((resolve) => {
+						resolveSecondFeed = resolve;
+					}),
+			);
+
+		plugin.set({
+			settings: {
+				feedCache: {
+					enabled: false,
+					ttlHours: 6,
+				},
+			},
+		} as never);
+
+		savedFeeds.set({
+			[testFeed.title]: testFeed,
+			[secondFeed.title]: secondFeed,
+		});
+		viewState.set(ViewState.EpisodeList);
+
+		render(PodcastView);
+
+		await screen.findByText("Fetching episodes...");
+
+		resolveFirstFeed([firstEpisode]);
+
+		expect(
+			await screen.findByText(firstEpisode.title),
+		).toBeInTheDocument();
+		expect(screen.getByText("Fetching episodes...")).toBeInTheDocument();
+		expect(screen.queryByText(secondEpisode.title)).toBeNull();
+
+		resolveSecondFeed([secondEpisode]);
+
+		expect(
+			await screen.findByText(secondEpisode.title),
+		).toBeInTheDocument();
+		await waitFor(() =>
+			expect(
+				screen.queryByText("Fetching episodes..."),
+			).not.toBeInTheDocument(),
+		);
+	});
 });

src/ui/PodcastView/PodcastView.svelte

@@ -39,6 +39,18 @@ import { get } from "svelte/store";
 	let displayedEpisodes: Episode[] = [];
 	let displayedPlaylists: Playlist[] = [];
 	let latestEpisodes: Episode[] = [];
+	let isFetchingEpisodes: boolean = false;
+	let pendingEpisodeFetches: number = 0;
+
+	function startEpisodeFetch() {
+		pendingEpisodeFetches += 1;
+		isFetchingEpisodes = true;
+	}
+
+	function finishEpisodeFetch() {
+		pendingEpisodeFetches = Math.max(0, pendingEpisodeFetches - 1);
+		isFetchingEpisodes = pendingEpisodeFetches > 0;
+	}
 
 onMount(() => {
 	const unsubscribePlaylists = playlists.subscribe((pl) => {
@@ -129,25 +141,51 @@ onMount(() => {
 		}
 	}
 
-	function fetchEpisodesInAllFeeds(
+	async function fetchEpisodesInAllFeeds(
 		feedsToSearch: PodcastFeed[]
 	): Promise<Episode[]> {
-		return Promise.all(
-			feedsToSearch.map((feed) => fetchEpisodes(feed))
-		).then((episodes) => {
-			return episodes.flat();
-		});
+		if (!feedsToSearch.length) {
+			return [];
+		}
+
+		startEpisodeFetch();
+
+		try {
+			const episodes = await Promise.allSettled(
+				feedsToSearch.map(async (feed) => {
+					const feedEpisodes = await fetchEpisodes(feed);
+
+					if (!selectedFeed && !selectedPlaylist) {
+						displayedEpisodes = latestEpisodes;
+					}
+
+					return feedEpisodes;
+				}),
+			);
+
+			return episodes
+				.map((result) => (result.status === "fulfilled" ? result.value : []))
+				.flat();
+		} finally {
+			finishEpisodeFetch();
+		}
 	}
 
 	async function handleClickPodcast(
 		event: CustomEvent<{ feed: PodcastFeed }>
 	) {
 		const { feed } = event.detail;
-		displayedEpisodes = [];
 
 		selectedFeed = feed;
-		displayedEpisodes = await fetchEpisodes(feed);
+		displayedEpisodes = [];
+		startEpisodeFetch();
 		viewState.set(ViewState.EpisodeList);
+
+		try {
+			displayedEpisodes = await fetchEpisodes(feed);
+		} finally {
+			finishEpisodeFetch();
+		}
 	}
 
 	function handleClickEpisode(event: CustomEvent<{ episode: Episode }>) {
@@ -166,7 +204,13 @@ onMount(() => {
 	async function handleClickRefresh() {
 		if (!selectedFeed) return;
 
-		displayedEpisodes = await fetchEpisodes(selectedFeed, false);
+		startEpisodeFetch();
+
+		try {
+			displayedEpisodes = await fetchEpisodes(selectedFeed, false);
+		} finally {
+			finishEpisodeFetch();
+		}
 	}
 
 	const handleSearch = debounce((event: CustomEvent<{ query: string }>) => {
@@ -216,6 +260,7 @@ onMount(() => {
 		<EpisodeList
 			episodes={displayedEpisodes}
 			showThumbnails={!selectedFeed || !selectedPlaylist}
+			isLoading={isFetchingEpisodes}
 			on:clickEpisode={handleClickEpisode}
 			on:contextMenuEpisode={handleContextMenuEpisode}
 			on:clickRefresh={handleClickRefresh}