Inconsitant UI Update

[yntpdotme]

Description:

Clicking the "Mark as Complete" button does not instantly update the sidebar checkbox. The UI inconsistency persists until a manual reload is performed.

Steps to Reproduce:

1. Click on the "Mark as Complete" button.
2. Observe that the sidebar checkbox does not update immediately.
3. Perform a manual reload to see the updated status.

Expected Behavior:

The UI should reflect the updated status of the task in real time when using the "Mark as Complete" button.

Screenshots

After Clicking on Button

After Hard Refresh

[devsargam]

Probably can be solved with useOptimistic react hook

[krishhh16]

I have confidence that I can solve this one. Here's what I learnt from the code-base:- The inconsistency lies in the fact that the sidebar is only rendered once when the whole page loads data from the backend, what's happening right now is that whenever the contentCompleted variable(which is responsible for changing Mark as Incomplete text to Mark as complete ) is changing, it's not re-rendering the sidebar to also re-render the check icon, meaning, the check mark is probably working independent of the state of the button, and only checks the value when the data is fetched from the database as to whether the course has been marked done or not

what I am going to do is:- In the parent component of the page that renders both the sidebar and the course video components to that specific page, I will crate a context, which will store both the function and value of that loadingMarkAs variable through useState, and then, make the sidebar re-render the check mark if there is a change in the variable.

I doubt that always fetching to get whether the course is done is not important since it won't create any kind of severe bug. So, having variables take care of this is much better, and only saving the value in the database in case the user arrives back to see which courses have they done.

@hkirat Please let me know if this approach is good and if I can work on this. Or maybe I can create the pull request for you to check if I implemented this correctly?