Cais gateway UI changes

[brendanator]

Revamped the UI and fixed several UI bugs. Only tested on desktop.

[brendanator]

This pull request was cloned from https://github.com/obscuronet/go-obscuro/pull/1614

Note: the URL is not a link to avoid triggering a notification on the original pull request.

[brendanator]

Sourcery Review:

Hey @brendanator - I've reviewed your changes and they look great!

General suggestions:

• Consider implementing transitions or animations for smoother visibility changes between UI elements to enhance the user experience.
• Ensure accessibility is taken into account, especially when toggling visibility of elements, to support a wider range of users.
• Abstract repeated patterns of behavior, such as toggling element visibility, into reusable functions to improve code maintainability.
• Verify the UI's responsiveness and compatibility across different browsers to ensure a consistent experience for all users.

Here's what I looked at during the review

• 🟡 General issues: 4 issues found
• 🟢 Security: all looks good
• 🟢 Testing: all looks good
• 🟢 Complexity: all looks good
• 🟢 Docstrings: all looks good

---

Help me be more useful! Please click 👍 or 👎 on each comment to tell me if it was helpful.

[brendanator]

suggestion (code_refinement): Setting the table display to none by default and later changing it dynamically via JavaScript suggests a progressive enhancement approach. This ensures that the table is only displayed when it's populated and ready, improving the user experience by not showing an empty or loading state. However, ensure that this behavior is clearly communicated to the user to avoid confusion.

[brendanator]

suggestion (code_refinement): The toggling of visibility between informationArea and informationArea2 based on user actions is a good practice for interactive applications. It helps in keeping the UI clean and focused on the current task. However, consider adding some form of transition or animation to make the change less abrupt and improve the overall user experience.

[brendanator]

suggestion (code_refinement): The use of visibility toggling between the beginBox and spinner elements to indicate loading or processing states is effective. However, ensure that accessibility considerations are taken into account. Screen readers and other assistive technologies might still perceive the hidden content as accessible, potentially confusing users. Consider using aria-hidden attributes or off-screen positioning for better accessibility.

[brendanator]

suggestion (code_refinement): The repetition of the pattern for toggling visibility between beginBox and spinner in different event listeners suggests that this could be abstracted into a function. This would reduce code duplication and improve maintainability. Consider creating a function like toggleVisibility(elementToShow, elementToHide) to encapsulate this behavior.