style: Improve error messages and loading text, add spacing to error details

This commit is contained in:
2025-11-21 00:59:12 +00:00
committed by Tanner Collin (aider)
parent f2310b6925
commit 1443fdcc32

View File

@@ -60,7 +60,7 @@ function Feed({ updateCache }) {
errorMessage = `The request to fetch story '${newStory.title}' (${newStory.id}) timed out after 10 seconds. Your connection may be unstable.`; errorMessage = `The request to fetch story '${newStory.title}' (${newStory.id}) timed out after 10 seconds. Your connection may be unstable.`;
console.log('Fetch timed out for story:', newStory.id); console.log('Fetch timed out for story:', newStory.id);
} else { } else {
errorMessage = `An error occurred while fetching story '${newStory.title}' (${newStory.id}): ${error.toString()}`; errorMessage = `An error occurred while fetching story '${newStory.title}' (ID: ${newStory.id}): ${error.toString()}.`;
console.log('Fetch failed for story:', newStory.id, error); console.log('Fetch failed for story:', newStory.id, error);
} }
setError(errorMessage); setError(errorMessage);
@@ -79,7 +79,7 @@ function Feed({ updateCache }) {
setStories(finalStories); setStories(finalStories);
}, },
(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: ${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);
} }
); );
@@ -92,7 +92,7 @@ function Feed({ updateCache }) {
<meta name="robots" content="index" /> <meta name="robots" content="index" />
</Helmet> </Helmet>
{error && {error &&
<details> <details style={{marginBottom: '1rem'}}>
<summary>Connection error? Click to expand.</summary> <summary>Connection error? Click to expand.</summary>
<p>{error}</p> <p>{error}</p>
</details> </details>
@@ -116,7 +116,7 @@ function Feed({ updateCache }) {
)} )}
</div> </div>
: :
<p>loading...</p> <p>Loading...</p>
} }
</div> </div>
); );