Display a loading spinner during an HTTP request in Appcelerator

Question

Display a loading spinner during an HTTP request in Appcelerator

As of now, I am facing a challenge in displaying a spinner while an HTTP request is being executed. Every time I try to implement a spinner, it stops animating as soon as the call starts.

var spinnerArray = [];
for (var i = 0; i < 20; i++) {
    spinnerArray.push('/images/preloaderGif/preloader'+ ("0" + i).slice(-2) + '.gif');
}
$.spinner.images = spinnerArray; 
$.spinner.duration = "200"; 
$.spinner.repeatCount = "0";

spin();

function spin(){
    $.spinner.start();
    callHTTP() //Prewritten function
    Ti.App.addEventListener('callEnd', function(e){
        $.spinner.stop();
    });
}

This issue causes the spinner to never actually show up on the screen. Removing the HTTP call or placing it within a timeout leads to the spinner spinning indefinitely or until the timeout finishes.

I am wondering if there is a way to keep the spinner animation running smoothly throughout the duration of the call?

javascript titanium appcelerator titanium-mobile

Answer 1

Answer №1

There is actually a much simpler and efficient way to display an indicator. Follow these easy steps:

First, download the widget called Loading Indicator Widget and add it to your project in the app->widgets folder. If the folder doesn't exist, create it.
Next, insert this line "nl.fokkezb.loading" : "*" into your app->config.json file under the dependencies section (see screenshot below). https://i.sstatic.net/Mqkmo.png

In your alloy.js file, include the line

Alloy.Globals.loading = Alloy.createWidget("nl.fokkezb.loading");

Now you can easily show or hide the indicator when making HTTP requests using the following code snippet:

function callHTTP() {
    if (!Ti.Network.online) {
       return;
    }

    Alloy.Globals.loading.show();

    var xhr = Ti.Network.createHTTPClient({
        onerror : function(e) {
            Alloy.Globals.loading.hide();
        },

        onload : function(e) {
            Alloy.Globals.loading.hide();
           // additional code here
        },
    });

    xhr.open("GET", url);
    xhr.send();
}

callHTTP();

By using this widget, you eliminate the need for long and error-prone code in different projects. With just 2 lines of code, you can effortlessly show or hide the loading indicator.

Remember that XHR error/success callbacks are the only places where you should write code to hide the indicators, as the completion time of HTTP requests is unpredictable.

Answer 2

There is actually a much simpler and efficient way to display an indicator. Follow these easy steps:

First, download the widget called Loading Indicator Widget and add it to your project in the app->widgets folder. If the folder doesn't exist, create it.
Next, insert this line "nl.fokkezb.loading" : "*" into your app->config.json file under the dependencies section (see screenshot below). https://i.sstatic.net/Mqkmo.png

In your alloy.js file, include the line

Alloy.Globals.loading = Alloy.createWidget("nl.fokkezb.loading");

Now you can easily show or hide the indicator when making HTTP requests using the following code snippet:

function callHTTP() {
    if (!Ti.Network.online) {
       return;
    }

    Alloy.Globals.loading.show();

    var xhr = Ti.Network.createHTTPClient({
        onerror : function(e) {
            Alloy.Globals.loading.hide();
        },

        onload : function(e) {
            Alloy.Globals.loading.hide();
           // additional code here
        },
    });

    xhr.open("GET", url);
    xhr.send();
}

callHTTP();

By using this widget, you eliminate the need for long and error-prone code in different projects. With just 2 lines of code, you can effortlessly show or hide the loading indicator.

Remember that XHR error/success callbacks are the only places where you should write code to hide the indicators, as the completion time of HTTP requests is unpredictable.

Answer 3

Answer №2

To display a loading spinner, you can utilize an ActivityIndicator component. Here is the documentation for more information:

$.activityIndicator.show();
var xhr = Ti.Network.createHTTPClient({
    onerror : function(e) {
        // error handling code
        $.activityIndicator.hide();
    },
    onload : function(e) {
        // success code
        $.activityIndicator.hide();
    },
});

xhr.open("GET", url);
xhr.send();

Answer 4

To display a loading spinner, you can utilize an ActivityIndicator component. Here is the documentation for more information:

$.activityIndicator.show();
var xhr = Ti.Network.createHTTPClient({
    onerror : function(e) {
        // error handling code
        $.activityIndicator.hide();
    },
    onload : function(e) {
        // success code
        $.activityIndicator.hide();
    },
});

xhr.open("GET", url);
xhr.send();

Display a loading spinner during an HTTP request in Appcelerator

Answer №1

Answer №2

Similar questions

Having trouble with the Cordova button not functioning on Android 9? A beginner seeks assistance

"Displaying slider position relative to total count before clicking on it for

The pairing of Transpiller and Internet Explorer 8 is like a dynamic

developing a dynamic map with javascript

The history.replaceState() function is failing to execute within the script of an <iframe>

Choose2 generateUniqueEntry identification from submission

You are only able to click the button once per day

Discovering the initial element in an array that meets a condition by employing an asynchronous function

What is the best way to use JavaScript or jQuery to place divs in the desired position?

Activate the textbox without utilizing `.focus()` method

What causes JavaScript to not execute sequentially?

Troubleshooting issues with the sidebar navigation in Laravel project using Vue and AdminLTE

How can I incorporate a CDN link into the newly updated Next.js App Router?

Having issues with transferring user input on change to a parent component in React JavaScript

Designing a menu inspired by the layout of Google Plus

Maintaining an object's position steady in relation to the camera in Three.js

Upgrade your AngularJS Directive to an Angular 2.x+ Directive by using an HTML decorator

The expiration period set in expireAfterSeconds doesn't seem to be functioning as expected in the time-to-live (ttl) configuration. Rows are

Tips for setting a pre-selected default value in Angular's Chosen feature

Customized wrapper for JQuery's ajax method. Callback is triggered without passing any parameters