Skip to content

Conversation

@VishakhGaitonde
Copy link

Title: Feat/Fix: Add informative UI to initial board setup loader (Closes #1871)

Closes #1871

Description of Change

This PR addresses the user experience issue where the application would show a dark screen with a bare spinner during the one-time 'initial board setup' process, causing user confusion.

Solution

I replaced the singular <CircularProgress /> component in the loading condition with an expanded UI block. This new screen includes the spinner along with centered, informative text (e.g., 'Setting up your personalized boards...') to explain the brief wait to the user.

Testing/Verification

Note to Maintainers: I have successfully confirmed the local development environment starts and the code compiles without errors. However, I was unable to fully test the Sign Up flow on my local machine due to a server connectivity error (likely needing local backend/DB setup).

I am confident the front-end change is correct and request maintainers to perform the final functional verification on the sign-up flow during the PR review.

@VishakhGaitonde
Copy link
Author

Hello Maintainers,

I have significantly updated this Pull Request to make the initial loading screen more robust, informative, and professional.

Major Changes Implemented

  • UI/UX Enhancement: Replaced the static, minimal loading state with a comprehensive overlay, featuring informative text, a spinning CircularProgress, and a cycling LinearProgress bar.
  • Dynamic Messaging: Implemented logic to change the loading message after 5 seconds (Almost there! Finalizing symbol dependencies...) to manage user expectations during the wait.
  • Error Handling (Timeout): Added a critical feature where a 30-second timer now checks if the board has loaded. If not, it displays a "Setup is taking longer..." message and a "Try Again" button to prevent the user from being stuck indefinitely. This improves the failure UX immensely.
  • Clean-up Logic: Ensured all timers (setTimeout calls) are cleared in componentWillUnmount and upon successful board load to prevent memory leaks.

Testing Notes (Critical)

Due to my local environment constraints (lack of a fully provisioned Cboard backend), I was unable to perform an end-to-end test of the Sign Up flow.

Please test the following:

  1. Initial Load: Confirm the messages change after 5 seconds.
  2. Timeout Failure: Verify that the "Try Again" button appears after 30 seconds if the backend fails to respond, and that clicking it correctly calls the getApiObjects() prop to retry the process.

Let me know if you need any further changes. Thank you!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Black screen with spinner

1 participant