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

fix: Cancel pending story fetches on filter change to prevent UI jumps

Browse Source 
Co-authored-by: aider (gemini/gemini-2.5-pro) <aider@aider.chat>
This commit is contained in:
Tanner Collin
2025-12-04 22:24:28 +00:00
parent 5736cde21a
commit b439199836
1 changed files with 15 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
webclient/src/Feed.js
View File

@@ -18,7 +18,9 @@ function Feed({ updateCache }) {
}; };
useEffect(() => { useEffect(() => {
fetch(filterSmallweb ? '/api?smallweb=true' : '/api') const controller = new AbortController();
fetch(filterSmallweb ? '/api?smallweb=true' : '/api', { signal: controller.signal })
.then(res => { .then(res => {
if (!res.ok) { if (!res.ok) {
throw new Error(`Server responded with ${res.status} ${res.statusText}`); throw new Error(`Server responded with ${res.status} ${res.statusText}`);
@@ -45,10 +47,13 @@ function Feed({ updateCache }) {
let preloadedCount = 0; let preloadedCount = 0;
for (const [index, newStory] of newApiStories.entries()) { for (const [index, newStory] of newApiStories.entries()) {
if (controller.signal.aborted) {
break;
}
try { try {
const controller = new AbortController(); const storyFetchController = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), 10000); // 10-second timeout const timeoutId = setTimeout(() => storyFetchController.abort(), 10000); // 10-second timeout
const storyRes = await fetch('/api/' + newStory.id, { signal: controller.signal }); const storyRes = await fetch('/api/' + newStory.id, { signal: storyFetchController.signal });
clearTimeout(timeoutId); clearTimeout(timeoutId);
if (!storyRes.ok) { if (!storyRes.ok) {
@@ -97,10 +102,16 @@ function Feed({ updateCache }) {
setLoadingStatus(null); setLoadingStatus(null);
}, },
(error) => { (error) => {
if (error.name === 'AbortError') {
console.log('Feed fetch aborted.');
return;
}
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()}.`;
setError(errorMessage); setError(errorMessage);
} }
); );
return () => controller.abort();
}, [updateCache, filterSmallweb]); }, [updateCache, filterSmallweb]);
return ( return (