How to work with UI/UX and networking in iOS?

Lets imagine a situation:
You have ios app and a screen, that handle 4 round buttons to add/remove some addons. if you press a button it should add or remove addon to user account and send API request for it.

So, how you should handle addition or removing of addon in UI, should you make button to sate active and then send request first, or before send request, wait for answer, and only then make button active?

A common approach in UI/UX design for network requests is to provide immediate feedback to the user after an action has been taken, while also preventing them from taking any further action until a response is received from the server.

In the case of your iOS app and the screen with four round buttons that add/remove addons, you could follow this approach by doing the following:

1. When the user taps on a button to add an addon, disable the button to prevent any further clicks until a response is received from the server. You can also display a loading indicator or progress bar to indicate that the request is being processed.
2. Send the API request to add the addon to the user’s account.
3. Once you receive a response from the server indicating that the addon has been successfully added, update the UI to reflect the change. This could involve changing the appearance of the button to indicate that the addon has been activated, and enabling the button so that the user can add other addons.
4. If the server response indicates that there was an error with the request, display an error message to the user and provide an option to retry the request.
5. The process for removing an addon would be similar, with the main difference being that you would send a request to the server to remove the addon when the user taps the corresponding button. You can follow the same steps as above to provide immediate feedback to the user and update the UI once the request is processed.

In summary, the best practice for working with UI/UX and network requests is to provide immediate feedback to the user while also preventing them from taking any further action until a response is received from the server. This can be achieved by disabling the button after a user has clicked it, displaying a loading indicator, and updating the UI once the server response is received.

Also it’s a good practice to store the state of the buttons to ensure that the UI reflects the correct state of the addons for the user.

For example, if a user adds an addon and then navigates away from the screen, the state of the button should be stored so that the addon is still displayed as activated when the user returns to the screen.

You can store the state of the buttons in a data store, such as a database or in-memory cache, or using a state management framework like Redux or MobX. When the screen loads, you can retrieve the stored state and use it to update the UI accordingly.

In addition, when you receive a response from the server after sending a request to add or remove an addon, you should update the stored state of the buttons accordingly. This will ensure that the UI reflects the correct state of the addons for the user, even if they have navigated away from the screen and returned later.