Bug | Layout shift when Clap is clicked

aadeshkulkarni commented 6 months ago

When user visits any article, and clicks on the clap button, the following things are observed on the UI

A loader appears that replaces the clap icon
After the loader vanishes, the clap icon again appears
After a while, when the API returns response, The clap icon re-appears and the clap count is changed on the UI causing layout shift of clap icon.

When user clicks on the clap icon, the clapping should be more intuitive. The CLS issue causes a bad UX.

Instead of clapIcon > then loader > then clapIcon | Show only clapIcon
The shifting of icon when the count increases should not happen. (Always assume the count will take specific width, so that the clapIcon will not shift to the left when the count is painted on the screen)
Light-weight animation to indicate the user clapped might look good (this is optional and open to other ideas) [refer medium claps for more details]

Hbrehman commented 5 months ago

@aadeshkulkarni - Can I pick this up?

aadeshkulkarni commented 5 months ago

Sure, it's now assigned to you.

aadeshkulkarni / figuringout