Issue #132: Refactor loading state handling and error messaging in script and layout

[shihabhasan0161]

currently it's responsive:

if you need any adjustments, please let me know.

[gemini-code-assist]

Summary of Changes

Hello @shihabhasan0161, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request significantly refactors the application's loading state and error messaging. The primary goal is to provide a more robust and user-friendly experience by centralizing error display logic and ensuring that post-loading UI updates only occur after successful data retrieval. These changes enhance the application's resilience to data fetching issues and improve the consistency of feedback to the user.

Highlights

• Centralized Error Handling: Refactored the error handling mechanism during data fetching to use a more centralized approach, displaying error messages within dedicated elements in the loading states.
• Improved Loading State Management: Updated the initializeApp function to conditionally execute post-loading actions only when data has successfully loaded, preventing issues in case of fetch failures. The display of loading states now consistently uses display: flex.
• HTML Structure Updates: Modified the layout.html to include a new loading-state class on loading containers and added a dedicated <p class="error-message"> element for displaying dynamic error messages.
• CSS Refinement: Removed the !important declaration from a display: flex style in styles.css for better maintainability and specificity control.

🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[deepsource-io]

Here's the code health analysis summary for commits bae28bd..ca53f37. View details on DeepSource ↗.

Analysis Summary

Analyzer	Status	Summary	Link
Secrets	✅ Success		View Check ↗
Python	✅ Success		View Check ↗
JavaScript	❌ Failure	❗ 6 occurences introduced 🎯 1 occurence resolved	View Check ↗

---

💡 If you’re a repository administrator, you can configure the quality gates from the settings.

[gemini-code-assist]

Code Review

This pull request effectively refactors the handling of loading states and error messages. The introduction of dedicated .loading-state elements in the HTML, along with the corresponding JavaScript logic to manage them, is a solid improvement for both user experience and code structure. The error handling for failed data fetching is now much clearer. My review includes a couple of suggestions to further improve the robustness of the new implementation by using more specific CSS classes for DOM selection, which will enhance long-term maintainability.

[gemini-code-assist]

For better robustness and maintainability, consider adding a specific class to the loading message paragraph, like loading-message. This would allow the corresponding JavaScript in script.js to use a more reliable selector (.loading-message) instead of the current p:not(.error-message), which is more fragile if the HTML structure changes.

Suggested change

	<p>Loading developers...</p>
	<p class="loading-message">Loading developers...</p>

[gemini-code-assist]

Similar to the mobile view's loading state, adding a specific class like loading-message here would improve the robustness of the JavaScript selector in script.js. This makes the code easier to maintain as the HTML structure evolves.

Suggested change

	<p>Loading developers...</p>
	<p class="loading-message">Loading developers...</p>

[shihabhasan0161]

@BaseMax if you tell me to adjust the code with what the gemini mentioned above, I will do it.

[BaseMax]

This branch has conflicts that must be resolved
Use the command line to resolve conflicts before continuing.

docs/users.json

[shihabhasan0161]

@BaseMax could you check this please?

[BaseMax]

Fully done and ready?

[shihabhasan0161]

@BaseMax All done, just one quick clarification from you, regarding the #112 do you think the button css is fine? if it looks good to you, then you can merge it. Everything else is working as expected.

[BaseMax]

if it looks good to you, then you can merge it. Everything else is working as expected.

What is the point of having export btns?

[BaseMax]

ok