I’m working on an e-commerce product page where users can add items to their cart by clicking an “Add to Cart” button. Here’s the issue I’m facing:
When a user clicks the “Add to Cart” button, an API call is made to update the cart on the server. However, sometimes the server response is delayed due to high traffic. During this delay, if the user clicks the button multiple times, multiple requests are sent, causing the product to be added multiple times.
This leads to two main problems:
- The same product gets added multiple times.
- The user doesn’t get immediate feedback, so they keep clicking.
I haven’t yet added any handling to prevent multiple requests or feedback for the user. I’m wondering what the best way is to:
- Disable the button until the request is completed,
- Handle the situation in case the user clicks too fast or the server responds slowly.
- Any suggestions or best practices on how to handle this?
I did same in my previous project but that time worked.