How can I make Flex Busy Indicator load early?

Question

I'm building a mobile app with Flash Builder 4.6 and AIR.

My Main.mxml class -- a ViewNavigatorApplication -- references a splash screen set to a minimum time of 6 seconds. After the splashscreen disappears, there's a period of a couple of seconds during which the content area of the screen is just blank white -- and that's when I need the Busy Indicator to appear.

EDIT: Additional Code, as requested:

In the Main.mxml class:

 protected function viewnavigatorAppInitializeHandler(event:FlexEvent):void
 {
    //checks various criteria to determine which data to load, ie which service call 
    // to make. When that is determined, code calls setUpModel().
 }

 private function setUpModel():void {   
    Model.Instance.initialize(); //adds listeners in the model, 
    //makes service call. Data is returned and parsed in the event handler.
    //APPLICATION_MODEL_LOADED event is then dispatched, and handled here

    Model.Instance.addEventListener( Model.APPLICATION_MODEL_LOADED, modelReadyHandler );
        }

        private function modelReadyHandler(e:Event):void
        {       
            //Busy Indicator only appears *after* the HomeListView is loaded.
            //I need it to appear *while* these calls are being made.
            navigator.pushView(HomeListView); //this is my First View
        }

So I think the question is: what is it that is being displayed before HomeListView? If it's Main.mxml -- the ViewNavigatorApplication -- then how do I avoid the 'not assignable' error?

In HomeListView:

        [Bindable] private var categoryList:ArrayCollection = new ArrayCollection();
        private function viewActivateHandler():void
        {
            //the service call has been made, and data is ready to be loaded into the control
            categories = Model.Instance.Categories;

I've tried this inside HomeListView:

<s:Group width="100%" height="100%">
<s:BusyIndicator 
    id="busy"
    visible="true" symbolColor="blue"
    horizontalCenter="0" verticalCenter="0"
    rotationInterval="100" />
</s:Group>

It works. But the problem is it only appears once HomeListView has loaded. I thought that the blank white was HomeListView, just before the list appeared. But it isn't.

So then I tried putting the above code into the Main.mxml file. But I got the following error:

 'spark.components.Group' is not assignable to the default property, 'navigationStack', of type 'spark.components.supportClasses.NavigationStack'.

So where can I put this BusyIndicator so that it covers the blank space before HomeListView appears?

Answer 1

I've figured out a way to do this.

From the documentation:

"Unlike Application, ViewNavigatorApplication is not meant to accept UIComponent objects as children. Instead, all visual components should be children of the views managed by the application."

That is why I was getting the error. So for my first View, I created a simple View called HolderView which contains the BusyIndicator:

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" title="HolderView">
<s:Group  width="100%" height="100%">
    <s:BusyIndicator 
        id="busy"
        visible="true" symbolColor="blue"
        horizontalCenter="0" verticalCenter="0"
        rotationInterval="100" />
</s:Group>

Then, from my Main.mxml file, I first load that HolderView.

        private function setUpModel():void {    
            Model.Instance.initialize();
            navigator.pushView(HolderView);
            Model.Instance.addEventListener(Model.APPLICATION_MODEL_LOADED, modelReadyHandler );
        }

Once the data has come back -- on the Model.APPLICATION_MODEL_LOADED event listener -- that is when I will load HomeListView:

        private function modelReadyHandler(e:Event):void
        {       
            navigator.pushView(HomeListView);
        }

This works. Hope it helps someone with same problem!