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 }) { QotNews -

Fetching stories X / Y...

+ {loadingStatus &&

Fetching stories {loadingStatus.current} / {loadingStatus.total}...

} {error &&
Connection error? Click to expand.