MBProgressHUD - 2 consecutive messages overlapping

Question

I am trying to show 2 MBProgressHUD messages on screen one after the other. I find the the 2nd messages overlaps the first instead of them appearing serially. This is what I am trying to do:

I have a logout button clicking which fires this and calls "saveCartNotification"

- (IBAction)logout:(id)sender {
  [self saveCartNotification];
}

"saveCartNotification" posts a MBProgressHUD with a delay of 5 seconds and then calls "userLogOut"

- (void)saveCartNotification{
    self.hud = [[MBProgressHUD alloc] initWithView:self.view];
    self.hud.labelText = @"Saving your cart..";
    self.hud.mode = MBProgressHUDModeIndeterminate;
    self.hud.dimBackground = YES;
    self.hud.animationType = MBProgressHUDAnimationFade;
    [self.view addSubview:self.hud];
    [self.hud show:YES];
    [self.hud hide:YES afterDelay:5];
    [self.hud show:YES];
    self.hud.labelText = @"Saving Cart and Favorites";
    [self.hud hide:YES afterDelay:5];

//Logout
[self userLogOut];

}

userLogOut now posts another MBProgressHUD message with a delay of 5 seconds:

- (void)userLogOut{
    self.hud = [[MBProgressHUD alloc] initWithView:self.view];
    self.hud.labelText = @"Logging out securely";
    self.hud.mode = MBProgressHUDModeIndeterminate;
    self.hud.dimBackground = YES;
    self.hud.animationType = MBProgressHUDAnimationFade;
    [self.view addSubview:self.hud];
    [self.hud show:YES];
    [self.hud hide:YES afterDelay:5];
}

Since I am calling these methods serially, my expected behaviour is:

1) MBProgressHUD message from "saveCartNotification" 2) Above message stays on for 5 seconds and disappears 3) MBProgressHUD message from "userLogOut" 4) Above message again stays on for 5 seconds and disappears

But what is happening is both messages seem to come on screen on the same time with MBProgressHUD message from "userLogOut" overlapping MBProgressHUD message from "saveCartNotification".

Could you please let me know what I am missing and what would I need to do to get my messages serially one after the other.

Your help is much appreciated.

Thanks, Mike

Answer 1

The problem is that you want messages to appear serially and for a rather long amount of time (in computer terms) while the two processes that these HUDs are to represent, happen rapidly one after another.

Your saveCartNotification method prepares the single instance of the HUD you are using to display the desired text. Then, immediately afterwards you trigger the userLogOut method which replaces the HUD with its own message.

So there are two possibilities I can think of right now:

1. Due to the fact that the saving is really quick, you get rid of the HUD for that step completely. You might want to adjust the text shown by the logout somehow to inform the user about the saved cart, if you like.
2. You only trigger the log out when the first HUD goes away. There is a method on MBProgressHUD called - (void)showAnimated:(BOOL)animated whileExecutingBlock:(dispatch_block_t)block completionBlock:(MBProgressHUDCompletionBlock)completion. In the first block, you do the saving and could - because it is running on a background thread - use some NSThread sleepForTimeInterval: based delay inside it to leave the message on screen for a while. Then in the completion block you trigger the logout. That way you effectively serialize the calls, causing both HUDs to remain on the screen for some time.

However, depending on how often this flow is used in your app, it might be annoying to a more experienced user to have to wait for the first message to disappear. I think, you would probably do fine with not 5 but maybe 2 seconds of delay for each message.

Answer 2

call your userLogOut by this one,

[self performSelector:@selector(userLogOut) withObject:nil afterDelay:5];

you have to do this because you are giving specific time to the MBProgressHUD for hide.

Hope this helps, Happy coding.

Answer 3

Either create two separate instances of MBProgrressHUD or change your logout call to

[self performSelector:@selector(userLogOut) withObject:nil afterDelay:5];

Since you are calling two methods sequentially & using same instance of MBProgressHUD, the first alert is overridden instantly by the userLogout method.