UX for handling delays in server response
I have a website that takes between 1-20 seconds to respond to user actions due to problematic server, and the request sometimes fails to do the task and needs to be retried.
While the server obviously has issue and we're trying to fix it, I wonder what kind of UX design I can make in the client side that can help mitigate a bit of the problem.
To simplify the case, let's assume I have a list of task that I displayed:
- Go to the market [x]
- Clean up my room [x]
- Do my homework [x]
I have two approaches in mind:
After clicking the delete button ([x]), I will make an http call to the server to delete the task, I will wait until the server response (can take to 20 seconds) then I will remove the task from the list.
After clicking the delete button ([x]), I will immediately remove the task from the list while making an http call to the server to delete the task, if it successful, the user won't notice anything, but if it failed, I'll pop up a message saying 'it's failed' and refresh the page.
What approach is better? Is there any other approach that I can use assuming the API Service can't be fixed?