ionicLoading --> mocking up 3 loaders - need to know when one is done to start the next


#1

Hello, I am implementing a “mock” screen (no real backend data). The scenario is when a user clicks on a “create account button”, I need to display 3 ionicLoading overlays
"Connecting" for 2 seconds, followed by “Importing” for 3s following by “All done” for 1.5 seconds.

What is the simplest way to achieve this? ionic loading does not return any indication when its done. I know I can write a function timer in the controller that can hide and switch the loaders but is there a simpler option that lets me do this one after the other (in its current form, they all overwrite each other)

$ionicLoading.show({
      template: 'Importing from'+str+'...',
    duration:2000,
    });
           $ionicLoading.show({
      template: 'Importing your profile...',
    duration:3000,
    });
        
         $ionicLoading.show({
      template: 'All done!',
    duration:1500,
    });

#2

Well, I’m guessing this is the simplest - took me a bit to figure out how to pass arguments to the timeout function. Passing arguments directly inside the function produces wrong results.

$scope.login = function (str) {
        
        $timeout (function() {mockloading(2000,"Connecting to "+str+"....")}, 0);
        $timeout (function() {mockloading(2000,"Reading from "+str+"....")}, 2000);
        $timeout (function() {mockloading(2000,"All Done!")}, 4000);
         }
    
    function mockloading(dur,msg)
    {
        //console.log("***** Inside Timer with " + msg );
        $ionicLoading.hide(); 
        $ionicLoading.show({
      template: msg,
        duration:dur,
        });
    }