No user-visible loading or error state when README fetch fails

[huyhoang171106]

Summary

Content is loaded asynchronously from GitHub, but the UI shows a blank page while loading and logs failures only to the console. On slow networks or blocked/CDN-failed requests, users get no feedback and may assume the site is broken.

Files changed

• index.html (modified)

Testing

• Not run in this environment.

Closes #617

[huyhoang171106]

Auto-closed: CI checks failed

The following checks failed: Cleanup artifacts

Closing this PR since required CI checks did not pass. Sorry for the inconvenience.

[Copilot]

Pull request overview

Improves the site’s UX by providing a user-visible loading state and a user-visible error message when the README content cannot be fetched, instead of rendering a blank page and only logging to the console.

Changes:

• Add an initial loading message to the <main> content area and make it a polite live region.
• Add HTTP status handling for the README fetch and display a user-facing error message on failure.
• Refactor DOM updates to target a dedicated #content element.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

The user-visible error state only covers the README fetch. If the jsDelivr scripts fail to load (e.g., markedGfmHeadingId or marked is unavailable), marked.use(...) will throw before the fetch chain runs, leaving the page stuck on the loading message with no visible error. Consider guarding these globals (or wrapping the marked setup in a try/catch) and updating content with a user-facing failure message in that case too.

Suggested change

	marked.use( markedGfmHeadingId.gfmHeadingId() );
	// Get the markdown file, convert it to HTML & put it inside the main tag
	const content = document.getElementById( 'content' );
	const content = document.getElementById( 'content' );
	try
	{
	if( typeof marked === 'undefined'
	|| typeof markedGfmHeadingId === 'undefined'
	|| typeof marked.use !== 'function' )
	{
	throw new Error( 'Markdown renderer not available' );
	}
	marked.use( markedGfmHeadingId.gfmHeadingId() );
	}
	catch( error )
	{
	if( content )
	{
	content.innerHTML = '<p>Unable to load content right now. Please retry later.</p>';
	}
	console.error( 'Error initializing markdown renderer:', error );
	// Do not proceed to fetch README if we cannot render it
	return;
	}
	// Get the markdown file, convert it to HTML & put it inside the main tag