How to show/hide the progressHUD, with MVVM and RxSwift in swift

Question

I'm beginning with MVVM in order to well separate logic code from the view. But I have some concern about where to put the progressHUD related code when tapping a button that makes a request.

Before, I used to do that:

//Before 
@IBAction func startRequestTapped() {
   SVProgressHUD.show()
    self.apiClient.requestObservable().subscribe(onError: { (error) in
        SVProgressHUD.hide()                    
    }, onCompleted: { 
        SVProgressHUD.hide()                                        
    })
}

But when I use mvvm, I do like that:

//In the viewModel
public var validateButtonDidTap = PublishSubject<Void>()
init() {
    validateButtonDidTap.flatMap { (_)
        return self.apiClient.requestObservable()
    }
}


   // In the viewController
viewDidLoad() {
    let tap = self.validateButton.rx.tap
    tap.bindTo(self.viewModel.validateButtonDidTap)
}

And amongst that, I don't know where to put the the ProgressHUD hide or show.

xandrefreire · Accepted Answer · 2017-01-31T20:57:32.670

Mark answer is right, but I am going to guide you step by step.

Let's supose you're going to try signing in.

Copy ActivityIndicator.swift file in your project.

In the viewModel:

//MARK: - Properties

/// The http client
private let apiClient: YourApiClient

/// Clousure when button is tapped
var didTappedButton: () -> Void = {}

/// The user 
var user: Observable<User>

/// Is signing process in progress
let signingIn: Observable<Bool> = ActivityIndicator().asObservable()

//MARK: - Initialization

init(client: YourApiClient) {
    self.client = client

    self.didTappedButton = { [weak self] in
        self.user = self.apiClient
                        .yourSignInRequest()
                        .trackActivity(self.signingIn)
                        .observeOn(MainScheduler.instance)
    }
}

Create an extension of SVProgressHUD: (I don't know SVProgressHUD library, but it would be something like this. Please fix it if needed)

extension Reactive where Base: SVProgressHUD {

    /// Bindable sink for `show()`, `hide()` methods.
    public static var isAnimating: UIBindingObserver<Base, Bool> {
        return UIBindingObserver(UIElement: self.base) { progressHUD, isVisible in
            if isVisible {
                progressHUD.show() // or other show methods
            } else {
                progressHUD.dismiss() // or other hide methods
            }
        }
    }

}

In your viewController:

@IBAction func startRequestTapped() {
    viewModel.didTappedButton()
}

override func viewDidLoad() {

    // ...

    viewModel.signingIn
             .bindTo(SVProgressHUD.rx.isAnimating)
             .addDisposableTo(disposeBag)
}

Thank you, I didn't think about adding reactive extension to an existing class — user3620372, Feb 03 '17 at 14:35
@Xfreire can you explain whats the where in extension means? — José Neto, Mar 30 '17 at 01:39
@XFreire: I am getting error - Cannot convert value of type 'Observable' to expected argument type 'ActivityIndicator' on .trackActivity(self.signingIn) line — Vijay, Sep 04 '18 at 06:23

score 10 · Answer 2 · answered Dec 01 '17 at 10:37

Accepted answer updated to Swift 4, RxSwift 4.0.0 and SVProgressHUD 2.2.2:

3- Extension:

extension Reactive where Base: SVProgressHUD {

   public static var isAnimating: Binder<Bool> {
      return Binder(UIApplication.shared) {progressHUD, isVisible in
         if isVisible {
            SVProgressHUD.show()
         } else {
            SVProgressHUD.dismiss()
         }
      }
   }

}

4- Controller:

viewModel.signingIn.asObservable().bind(to: SVProgressHUD.rx.isAnimating).disposed(by: disposeBag)

score 4 · Answer 3 · answered Jan 31 '17 at 14:21

4

You could try using an ActivityIndicator.

See the example here: https://github.com/RxSwiftCommunity/RxSwiftUtilities

answered Jan 31 '17 at 14:21

Mark Leonard

2,056
19
28

How to show/hide the progressHUD, with MVVM and RxSwift in swift

3 Answers3