From 856c360d9835ec598f55ed106fb0f9037e7e4327 Mon Sep 17 00:00:00 2001
From: Tanner Collin <git@tannercollin.com>
Date: Tue, 2 Dec 2025 01:20:27 +0000
Subject: [PATCH] feat: Add loading progress indicator to Feed

Co-authored-by: aider (gemini/gemini-2.5-pro) <aider@aider.chat>
---
 webclient/src/Feed.js | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/webclient/src/Feed.js b/webclient/src/Feed.js
index 473258b..6915bb5 100644
--- a/webclient/src/Feed.js
+++ b/webclient/src/Feed.js
@@ -7,6 +7,7 @@ import { sourceLink, infoLine, logos } from './utils.js';
 function Feed({ updateCache }) {
 	const [stories, setStories] = useState(() => JSON.parse(localStorage.getItem('stories')) || false);
 	const [error, setError] = useState('');
+	const [loadingStatus, setLoadingStatus] = useState(null);
 
 	useEffect(() => {
 		fetch('/api')
@@ -30,6 +31,8 @@ function Feed({ updateCache }) {
 						localStorage.setItem('stories', JSON.stringify(newApiStories));
 					}
 
+					setLoadingStatus({ current: 0, total: newApiStories.length });
+
 					let currentStories = Array.isArray(stories) ? [...stories] : [];
 					let preloadedCount = 0;
 
@@ -50,6 +53,7 @@ function Feed({ updateCache }) {
 							console.log('Preloaded story:', fullStory.id, fullStory.title);
 							updateCache(fullStory.id, fullStory);
 							preloadedCount++;
+							setLoadingStatus({ current: preloadedCount, total: newApiStories.length });
 
 							const existingStoryIndex = currentStories.findIndex(s => s.id === newStory.id);
 							if (existingStoryIndex > -1) {
@@ -82,6 +86,7 @@ function Feed({ updateCache }) {
 
 					localStorage.setItem('stories', JSON.stringify(finalStories));
 					setStories(finalStories);
+					setLoadingStatus(null);
 				},
 				(error) => {
 					const errorMessage = `Failed to fetch the main story list from the API. Your connection may be down or the server might be experiencing issues. ${error.toString()}.`;
@@ -96,7 +101,7 @@ function Feed({ updateCache }) {
 				<title>QotNews</title>
 				<meta name="robots" content="index" />
 			</Helmet>
-			<p>Fetching stories X / Y...</p>
+			{loadingStatus && <p>Fetching stories {loadingStatus.current} / {loadingStatus.total}...</p>}
 			{error &&
 				<details style={{marginBottom: '1rem'}}>
 					<summary>Connection error? Click to expand.</summary>