Failed to show loading indicator while load more data in Titanium IOS Listview

Below is my code , not sure where's went wrong . Hope any expert could help me.

index.xml

<Alloy>
    <Window class="container">
        <Button onClick="fb_login" zIndex="100000" title="Login" id="fbbtn"></Button>
        <ListView id="list" defaultItemTemplate="template1">
            <Templates>
 
                <!-- main template for displaying the list items -->
                <ItemTemplate  id="template1" name="template1"  class="template1">
                    <ImageView id="pic"  bindId="pic" class="imageThumb"/>
                    <View id="textContainer">
                        <Label id="textLabel" bindId="textLabel" class="title"/>
                    </View>
                </ItemTemplate>
 
                <ItemTemplate  id="loading" name="loading" >
                    <ActivityIndicator id="load" bindId="loadingIndicator"/>
                </ItemTemplate>
 
            </Templates>
            <!-- we only have one section and the items are contstucted using template1 -->
            <ListSection id="section" >
                <ListItem template="template1" />
                <ListItem template="loading" />
            </ListSection>
        </ListView>
    </Window>
</Alloy>

var i = 20;
 
var fb = require('facebook');
fb.appid = "YOUR FB APP ID";
fb.permissions = ["read_stream", "email"];
fb.forceDialogAuth = true;
 
function createListView(_data) {
 
    var items = [];
 
    for (var k = 0; k < i; k++) {
        items.push({
            template : "template1", // set the template
            textLabel : {
                text : _data[k].name // assign the values from the data
            },
            pic : {
                image : _data[k].pic_square // assign the values from the data
            }
        });
    }
 
    // add the array, items, to the section defined in the index.xml file
    $.section.setItems(items);
 
    // Set the initial item threshold
    $.list.setMarker({
        sectionIndex : 0,
        itemIndex : (i - 1)
    });
 
    // Load more data and set a new threshold when item threshold is reached
    $.list.addEventListener('marker', function(e) {
        var max = i + 20;
        var data = [];
        for (var k = i; k < max; k++) {
            data.push({
                template : "template1", // set the template
                textLabel : {
                    text : _data[k].name // assign the values from the data
                },
                pic : {
                    image : _data[k].pic_square // assign the values from the data
                }
            });
        }
 
        // Now we're going to use the 'loading' template, therefore showing
        data.push({
            loadingIndicator : {
                message : 'Loading...'
            },
            template : 'loading'
        });
 
        $.section.appendItems(data);
        i = i + 20;
        $.list.setMarker({
            sectionIndex : 0,
            itemIndex : (i - 1)
        });
    });
 
}
 
 
function fb_login() {
 
    fb.authorize();
}
 
// set login callback
fb.addEventListener('login', function(e) {
    if (e.success) {
 
        var query = "SELECT uid, name, pic_square, hometown_location FROM user ";
        query += "where uid IN (SELECT uid2 FROM friend WHERE uid1 = " + fb.uid + ")";
        query += "order by last_name";
        Ti.API.info("user id " + fb.uid);
        fb.request("fql.query", {
            query : query
        }, function(r) {
            if (r.success) {
                //alert(r.result);
                $.fbbtn.visible = false;
                createListView(JSON.parse(r.result));
            } else {
                alert('error happened!');
            }
        });
 
    } else if (e.error) {
 
        alert("Login failed.");
 
    } else if (e.cancelled) {
        alert("Login Canceled.");
    }
 
});
 
// open the view
$.index.open();