Candidate Decider - Hide Latency from Listeners through Frontend State Updates

[andrew032011]

Summary

Previously, there was a latency issue on the candidate decider related to the listeners needing about a 2-3 second delay to update the responses real-time.

I have "hidden" the latency by updating frontend state instead of solely relying on Firestone listeners to wait for DB updates.

When the listeners receives the new snapshot, the local state will be properly synced. Updates to ratings/comments now show up instantaneously on the candidate decider UI.

Also:

• Add save button to prevent multi-threading issues (when users spam the ratings really hard the UI glitches out. The save button lets them switch between ratings but then commit the rating they want)
• For some reason, we were setting the comment to be '' every time we hit the save button, so if you hit the save button twice, you would clear out your comment

Notion/Figma Link

https://www.notion.so/cornelldti/Candidate-Decider-Hide-Latency-from-Listeners-through-Frontend-State-Updates-d020a49d69b3439b93380add5833d6e0?pvs=4

Test Plan

Recorded a demo video for the candidate decider which includes this instantaneous update functionality (skip to 1:50).

Screen.Recording.2023-09-24.at.12.25.34.PM.mov

Notes

Breaking Changes

[dti-github-bot]

[diff-counting] Significant lines: 124.

[oscarwang20]

Can we add a check to see if the form inputs changed before we call the api in handleRatingChange and handleCommentChange? It would just use getRating() and getComment() to check if the current rating and comment are different from what they were originally.

[oscarwang20]

UI suggestion: maybe we could also just have one save button to handle both the rating change and comment change. And to make it clear that we are saving both, we could put the button above the form field:

[andrew032011]

UI suggestion: maybe we could also just have one save button to handle both the rating change and comment change. And to make it clear that we are saving both, we could put the button above the form field:

Agreed, done.

[andrew032011]

Can we add a check to see if the form inputs changed before we call the api in handleRatingChange and handleCommentChange? It would just use getRating() and getComment() to check if the current rating and comment are different from what they were originally.

I agree with this to prevent excessive API calls, but I like the added UX of disabling the save button until at least one change (rating or comment) has been made. So I've done that instead. This behavior should also remind them to save too, since the button will light up once they've made a change.

Screen.Recording.2023-09-26.at.5.38.29.PM.mov

[oscarwang20]

Looks great!