What is the solution to pausing $ionicLoading when a promise is being fulfilled?

Question

What is the solution to pausing $ionicLoading when a promise is being fulfilled?

I created an ionicLoading with a function called startNow() to navigate from original-page to my-next-page.

The first time, I simply invoke startNow() which takes me directly to my-next-page after the $timeout() service is triggered.

However, I encountered a problem:

In my myLoadingTemplate.html, there is a cancel button that also triggers the startNow(true) function. The issue arises when I click this cancel button during loading - the page redirects back to the original-page. Nevertheless, after 2500ms, the page then correctly navigates to my-next-page.

How can I resolve this issue?

$scope.startNow = function(is_force)
{
     if(is_force===true)
     {
         $state.go('orignal-page');
         $ionicLoading.hide();
     }else
     {
         $ionicLoading.show({
             templateUrl: "myLoadingTemplate.html",
             nBackdrop: false
           }).then(function(){
                   $timeout(function(){ 

                      $state.go('my-next-page');
                      $ionicLoading.hide();

                   },2500);
         });
     }
}

javascript angularjs ionic-framework loading

Answer 1

Answer №1

It seems like your main concern is preventing the delayed state change after the timeout when cancelling. One way to achieve this is by canceling the timeout itself. The $timeout function returns a promise that can be saved and used to cancel the timeout when needed, such as when clicking a cancel button.

I have made some modifications to your code below in hopes that it resolves the issue you are facing:

Correction: I mistakenly mentioned that $ionicLoading.show returns a promise, which is actually incorrect in this case. I have fixed this in the code example provided below. Additionally, I changed $scope.transitionTimeout to $rootScope.transitionTimeout. While using $rootScope is not the cleanest solution, it was the quickest way to demonstrate a working example. Since it's not possible to pass a scope to the $ionicLoading service directly, adding a controller to the loading template creates a new scope where the transitionTimeout promise is not defined.

A better approach would be to create separate controllers for the view and the loading template, with a service handling communication between them and storing the promise.

However, the following code offers a simple and functional solution. You can also test it out here:

$scope.startNow = function(is_force)
{
     if(is_force === true)
     {
         // Cancel the timeout using the reference
         // Note: Using $rootScope may not be the best practice here
         //       This is just to quickly address the issue
         //       A more efficient solution would involve implementing a LoadingService
         //       to store the transition timeout promise uniquely
         $timeout.cancel($rootScope.transitionTimeout);

         $state.go('original-page');
         $ionicLoading.hide();
     } else
     {
         $ionicLoading.show({
           templateUrl: "myLoadingTemplate.html",
           nBackdrop: false
         })

         // Save the promise here
         $rootScope.transitionTimeout = $timeout(function(){ 
           $state.go('my-next-page');
           $ionicLoading.hide();
         });
     }
}

Answer 2

It seems like your main concern is preventing the delayed state change after the timeout when cancelling. One way to achieve this is by canceling the timeout itself. The $timeout function returns a promise that can be saved and used to cancel the timeout when needed, such as when clicking a cancel button.

I have made some modifications to your code below in hopes that it resolves the issue you are facing:

Correction: I mistakenly mentioned that $ionicLoading.show returns a promise, which is actually incorrect in this case. I have fixed this in the code example provided below. Additionally, I changed $scope.transitionTimeout to $rootScope.transitionTimeout. While using $rootScope is not the cleanest solution, it was the quickest way to demonstrate a working example. Since it's not possible to pass a scope to the $ionicLoading service directly, adding a controller to the loading template creates a new scope where the transitionTimeout promise is not defined.

A better approach would be to create separate controllers for the view and the loading template, with a service handling communication between them and storing the promise.

However, the following code offers a simple and functional solution. You can also test it out here:

$scope.startNow = function(is_force)
{
     if(is_force === true)
     {
         // Cancel the timeout using the reference
         // Note: Using $rootScope may not be the best practice here
         //       This is just to quickly address the issue
         //       A more efficient solution would involve implementing a LoadingService
         //       to store the transition timeout promise uniquely
         $timeout.cancel($rootScope.transitionTimeout);

         $state.go('original-page');
         $ionicLoading.hide();
     } else
     {
         $ionicLoading.show({
           templateUrl: "myLoadingTemplate.html",
           nBackdrop: false
         })

         // Save the promise here
         $rootScope.transitionTimeout = $timeout(function(){ 
           $state.go('my-next-page');
           $ionicLoading.hide();
         });
     }
}

What is the solution to pausing $ionicLoading when a promise is being fulfilled?

Answer №1

Similar questions

Using Typescript and Webpack - Make sure you have the right loader set up to handle this specific file type, as at the moment there are no loaders configured to process

What is the best way to ensure a textarea remains expanded when the parent element is in focus?

struggling with the predictive text feature, need some assistance

Creating an AngularJS directive that includes a dynamic template and transclude functionality

Utilize JSON to populate data in a switch case scenario

Dealing with local JSON data asynchronously using ReactJS

Forward users to specific date and time on Everwebinar link

Implementing an active state for the initial item in jCarousel Lite

Resolving promises in a sequential manner can lead to encountering errors along

What is the reason for the global impact of CSS-Modules on html elements?

Leveraging React Router v5 along with Code Splitting and Server Side Rendering for optimized Data Prefetching

The Disable Button is malfunctioning as the text is deleted but the button remains enabled

Retrieve Content from a Different Web Page Using Ajax

When AJAX is invoked, the HTML content fails to display within a div

Incorporate Subtitles into Your Website Using JWPlayer

initiating a submission upon the occurrence of an onchange event on an input field of type "file"

Executing Angular.js command to activate a separate directive

Creating a Cubic Bezier Curve connecting two points within a 3D sphere using three.js

With Ionic, you can use one single codebase for both iPad and iPhone

Setting bootstrap datetimepicker values dynamically from a variable