Stopping a Progress Bar when a page has loaded.

Question

I currently have an application that uses a linkbar with a viewstack.  If I click on a particular link, a component mxml page with an advanced datagrid is loaded.  However, the datagrid can take up to 10 seconds to load.   So, I need to implement a progress bar that will run until the page is completely loaded/ painted.   What phase and or event should I use to capture this.

Answer 1

I added your Preloader AS class and called the preloader from my application class and recieved an error can the preloader only be used in the Application class.
Start Class ( there is a destPath associated with this and that is why you don't see any other code. A .swf file is loadded):
<?xml version="1.0" encoding="utf-8"?><mx:Application 
xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"preloader="com.dstsystems.regulatory.compliance.components.ecompliance.view.FlashPreloader">
 </mx:Application>
ERROR Received and associated function below:
1046: Type was not found or was not a compile-time constant: FlexEvent. FlashPreloader.as SmartDeskRegulatoryFlex/src/com/dstsystems/regulatory/compliance/components/ecompliance/v iew line 45 Flex Problem
private function initComplete_handler ( event:FlexEvent ):void
dispatchEvent(
new Event( Event.COMPLETE ) );}
Is it possible to add the Preloader directly to the Component.mxml in question.  My complile time issue is corrected but the preloader doesn't seem to work.
<?xml version="1.0" encoding="utf-8"?> 
<mx:VBox 
xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%" backgroundColor="#FFFFFF" xmlns:view="
com.XXXsystems.regulatory.compliance.components.ecompliance.view.*"preloader="
com.dstsystems.regulatory.compliance.components.ecompliance.view.FlashPreloader"creationComplete="Init()"
paddingLeft="10" paddingTop="10" paddingRight="10" paddingBottom="10"horizontalScrollPolicy="
off" verticalScrollPolicy="off">
<mx:Script>
<![CDATA[
import
mx.events.AdvancedDataGridEvent;