Enhancement: Customize Blazor Reconnecting Dialog

[bberka]

Description

Customize the default Blazor reconnecting dialog in the web UI to be consistent with the existing UI design and branding. The current dialog conflicts with the default dark UI theme, making it visually jarring. Replace the default dialog with a custom component or a dedicated page.

---

Why This Feature is Needed

• UI Consistency: A customized reconnecting dialog will provide a seamless and consistent user experience.
• Branding: Aligning the reconnecting dialog with the app's design and branding improves the overall aesthetic appeal.
• Improved User Experience: A visually appealing and informative reconnecting dialog can reassure users during connection interruptions.
• Fix for Theme Conflicts: Resolves the visual conflict between the default reconnecting dialog and the app's default dark UI theme.

---

Implementation Details

1. Remove Default Dialog:

   • Disable or remove the default Blazor reconnecting dialog.

2. Create Custom Component/Page:

   • Create a custom Blazor component or a dedicated page to display the reconnecting status.
   • The component or page should include the following:
     • A visually appealing message (e.g., "Reconnecting...", "Attempting to reconnect to the server...").
     • A progress indicator or animation.
     • A customizable design that matches the existing UI (e.g., dark theme, fonts, colors).

3. Integration:

   • Use Blazor’s built-in reconnection event handlers (OnDisconnected, OnReconnected) to display the custom component/page when a connection is lost.
   • Ensure that the custom component/page is displayed automatically when the connection is lost and hidden when the connection is restored.

4. Configuration Options (Optional):

   • Allow admins to customize the appearance or content of the custom component/page via settings in the web UI.

5. Testing:

   • Test the custom reconnecting dialog under various network conditions to ensure it behaves correctly.
   • Verify that the component/page is displayed automatically when a connection is lost and hidden when the connection is restored.

---

Acceptance Criteria

• The default Blazor reconnecting dialog is disabled or removed.
• A custom Blazor component or page is created to display the reconnecting status.
• The custom component/page matches the existing UI design and branding.
• The custom component/page is displayed automatically when a connection is lost and hidden when the connection is restored.
• The feature is tested and works correctly under various network conditions.

---

Priority

Medium to Low

---

Additional Notes

• This feature is marked as Medium to Low Priority because while it improves the user experience and addresses visual inconsistencies, it is not critical for the core functionality of the application.
• If resources are limited, this feature can be deferred to a later milestone.