jason/qotnews
1
0
Fork 0
forked from tanner/qotnews
Code Issues Pull Requests Releases Wiki Activity

feat: Add loading progress indicator to Feed

Browse Source 
Co-authored-by: aider (gemini/gemini-2.5-pro) <aider@aider.chat>
This commit is contained in:
Tanner Collin
2025-12-02 01:20:27 +00:00
parent 1ce55e6d1f
commit 856c360d98
1 changed files with 6 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
webclient/src/Feed.js
View File

@@ -7,6 +7,7 @@ import { sourceLink, infoLine, logos } from './utils.js';
function Feed({ updateCache }) { function Feed({ updateCache }) {
const [stories, setStories] = useState(() => JSON.parse(localStorage.getItem('stories')) || false); const [stories, setStories] = useState(() => JSON.parse(localStorage.getItem('stories')) || false);
const [error, setError] = useState(''); const [error, setError] = useState('');
const [loadingStatus, setLoadingStatus] = useState(null);
useEffect(() => { useEffect(() => {
fetch('/api') fetch('/api')
@@ -30,6 +31,8 @@ function Feed({ updateCache }) {
localStorage.setItem('stories', JSON.stringify(newApiStories)); localStorage.setItem('stories', JSON.stringify(newApiStories));
} }
setLoadingStatus({ current: 0, total: newApiStories.length });
let currentStories = Array.isArray(stories) ? [...stories] : []; let currentStories = Array.isArray(stories) ? [...stories] : [];
let preloadedCount = 0; let preloadedCount = 0;
@@ -50,6 +53,7 @@ function Feed({ updateCache }) {
console.log('Preloaded story:', fullStory.id, fullStory.title); console.log('Preloaded story:', fullStory.id, fullStory.title);
updateCache(fullStory.id, fullStory); updateCache(fullStory.id, fullStory);
preloadedCount++; preloadedCount++;
setLoadingStatus({ current: preloadedCount, total: newApiStories.length });
const existingStoryIndex = currentStories.findIndex(s => s.id === newStory.id); const existingStoryIndex = currentStories.findIndex(s => s.id === newStory.id);
if (existingStoryIndex > -1) { if (existingStoryIndex > -1) {
@@ -82,6 +86,7 @@ function Feed({ updateCache }) {
localStorage.setItem('stories', JSON.stringify(finalStories)); localStorage.setItem('stories', JSON.stringify(finalStories));
setStories(finalStories); setStories(finalStories);
setLoadingStatus(null);
}, },
(error) => { (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()}.`; 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> <title>QotNews</title>
<meta name="robots" content="index" /> <meta name="robots" content="index" />
</Helmet> </Helmet>
<p>Fetching stories X / Y...</p> {loadingStatus && <p>Fetching stories {loadingStatus.current} / {loadingStatus.total}...</p>}
{error && {error &&
<details style={{marginBottom: '1rem'}}> <details style={{marginBottom: '1rem'}}>
<summary>Connection error? Click to expand.</summary> <summary>Connection error? Click to expand.</summary>