Improve Login Page UX: Add Loading Indicator and Error Handlingfix blank screen when loading

[Erichao233]

PR title

Improve Login Page UX: Add Loading Indicator and Error Handling

---

PR descripion

Fix issue#257
This PR enhances the user experience on the Login Page by addressing the issue of a blank screen during loading. It introduces a loading indicator and error handling to provide better feedback to users.

🔧 Changes Made

1. Loading Indicator:

   • Added a loading spinner that displays immediately when the login page is accessed, providing users with immediate feedback.

2. Error Handling:

   • Implemented error detection for the iframe. If loading fails, a message ("Loading failed, please try again.") is shown to inform users.

3. Conditional Rendering:

   • Used component states to control the display of the loading indicator and error message based on the loading status of the iframe.

✅ Testing Performed

• Verified that the loading spinner appears during loading.
• Confirmed the spinner disappears once the iframe content loads successfully.
• Tested error scenarios to ensure the error message displays correctly.

📈 Impact

These enhancements improve user feedback during the login process, ensuring users are informed of the system's status and reducing confusion.