code100x
Improving User Experience with Loading Spinner and Disabled State on Buttons
Issue 1: Lack of Loading Spinner or Disabled State on Buttons
Description: Buttons in various parts of the application, including the sign-up/login page and video rendering pages, did not have a loading spinner or disabled state. This could lead to users repeatedly clicking buttons while waiting for backend API responses.
Solution: Added loading spinner and disabled state to buttons to prevent multiple clicks and provide visual feedback to users during API calls.
Affected Buttons:
- Sign-up/Login Page: Signin Button,
- Video Rendering Page: Mark as Complete Button, Add Comment Button, Upvote Button, Downvote Button
- Home page : Refresh Database Button
Example -->
Before->
https://github.com/code100x/cms/assets/112716576/9d33e861-ed75-489f-9b39-92115df36415
After ->
https://github.com/code100x/cms/assets/112716576/441d4d86-3bbb-4734-ac4e-080a7f9e5731
Issue 2: Inconsistency in Button Styles
Description: The buttons for "Mark as Complete" and "Slides" on the video rendering pages were different from other buttons used in the application, leading to inconsistency in button styles.
Solution: Standardized the button styles for "Mark as Complete" and "Slides" to match the rest of the application's buttons for a consistent user experience.
Example-->
Before ->
After ->
