From blocking to unblocking UI in 3+1 steps

By blocking I mean disable button to prevent user invoking the same action before current is completed.

1. Block everything. For example, if user click to any button, block all others buttons. It’s robust, but brutal for UX because whole UI is frozen until current action is completed.
2. Block action. For example, if user click to login button, all other login buttons should be blocked as well. Login button represents one action, but can be rendered in many places in app. For example, if user click to login button in header, and then change page, login button in another page should be blocked as well.
3. Block specific action. For example add-product-to-cart button. Such button can be rendered in many places for one product — in product listing, product detail, or to buy suggestion box. User should be able to click add-product-to-cart buttons subsequently without waiting to previous.
4. Don’t block anything. It’s called optimistic UI and it allows app to work offline, but it requires to maintain client side app state, which it’s not easy to implement correctly, since your app have to deal with client/server inconsistent state, therefore have to merge conflicts intelligently.

The most straightforward way is to block current pending action.