Show throbber while tableview is loading

You must Login before you can answer or comment on any questions.

How can i display an image like a throbber while the tableview is loading.

I have an rss feed that loads into a tableview. Because it has to pull the information from an .xml source on the internet it can take a second. So it looks like the app is frozen. I want to display a throbber so that the user will understand that the data is being loaded.

4 Answers

Accepted Answer

To expound on what Aaron suggested, you would want to show the throbber prior to the xhr.send() method, then hide it during the xhr.onload() or xhr.onerror() methods. An example of using an activity indicator is in this kitchen sink example.

Could you give me an example. My code is: 

// create table view data object
var data = [];
 
var xhr = Ti.Network.createHTTPClient();
xhr.open("GET","http://tweakers.net/feeds/nieuws.xml");
xhr.onload = function()
{
    try
    {
        var doc = this.responseXML.documentElement;
        var items = doc.getElementsByTagName("item");
        var x = 0;
        var doctitle = doc.evaluate("//channel/title/text()").item(0).nodeValue;
        for (var c=0;c<items.length;c++)
        {
            var item = items.item(c);
            var title = item.getElementsByTagName("title").item(0).text;
            var row = Ti.UI.createTableViewRow({height:80});
            var label = Ti.UI.createLabel({
                text:title,
                left:5,
                top:5,
                bottom:5,
                right:5,
                color:'#FFF'             
            });
            row.add(label);
            data[x++] = row;
            row.url = item.getElementsByTagName("link").item(0).text;
        }
 
        var tableview = Titanium.UI.createTableView({data:data});
        Titanium.UI.currentWindow.add(tableview);
        tableview.addEventListener('click',function(e)
        {
            var w = Ti.UI.createWindow({title:doctitle});
            var wb = Ti.UI.createWebView({url:e.row.url});
            w.add(wb);
            var b = Titanium.UI.createButton({
                title:'Close',
                style:Titanium.UI.iPhone.SystemButtonStyle.PLAIN
            });
            w.setLeftNavButton(b);
            b.addEventListener('click',function()
            {
                w.close();
            });
            w.open({modal:true});
        });
    }
    catch(E)
    {
        alert(E);
    }
};
xhr.send();

— answered 2 years ago by Eddard Stark
answer permalink
1 Comment

  • Run the kitchen sink activity indicator example to see what style indicator you like. But at the most basic level you need: 

    // Define the activity indicator somewhere early in code
// Adjust the properties to suit your taste
var actInd = Ti.UI.createActivityIndicator();
 
// Show the activity indicator prior to the send
actInd.show();
xhr.send();
 
// Hide the activity indicator when network traffic complete
xhr.onerror = function()
{
    actInd.hide();
}
xhr.onload = function()
{
    actInd.hide();
    try { ...
    Once your problem is resolved, please mark an answer as "best" as it helps rank future search results.

    — commented 2 years ago by Doug Handy

Could you give me an example. My code is: 

// create table view data object
var data = [];
 
var xhr = Ti.Network.createHTTPClient();
xhr.open("GET","http://tweakers.net/feeds/nieuws.xml");
xhr.onload = function()
{
    try
    {
        var doc = this.responseXML.documentElement;
        var items = doc.getElementsByTagName("item");
        var x = 0;
        var doctitle = doc.evaluate("//channel/title/text()").item(0).nodeValue;
        for (var c=0;c<items.length;c++)
        {
            var item = items.item(c);
            var title = item.getElementsByTagName("title").item(0).text;
            var row = Ti.UI.createTableViewRow({height:80});
            var label = Ti.UI.createLabel({
                text:title,
                left:5,
                top:5,
                bottom:5,
                right:5,
                color:'#FFF'             
            });
            row.add(label);
            data[x++] = row;
            row.url = item.getElementsByTagName("link").item(0).text;
        }
 
        var tableview = Titanium.UI.createTableView({data:data});
        Titanium.UI.currentWindow.add(tableview);
        tableview.addEventListener('click',function(e)
        {
            var w = Ti.UI.createWindow({title:doctitle});
            var wb = Ti.UI.createWebView({url:e.row.url});
            w.add(wb);
            var b = Titanium.UI.createButton({
                title:'Close',
                style:Titanium.UI.iPhone.SystemButtonStyle.PLAIN
            });
            w.setLeftNavButton(b);
            b.addEventListener('click',function()
            {
                w.close();
            });
            w.open({modal:true});
        });
    }
    catch(E)
    {
        alert(E);
    }
};
xhr.send();

Your Answer

Think you can help? Login to answer this question!