How to tell when element is finally shown on screen? - apache-flex

Question

I have a "Loading" dialog that displays while I'm adding a lot of custom elements to a container. I've set the dialog to disappear when the last added element's creationCompleteHandler is called, but the dialog disappears before all the elements display on screen (which results in a very large lag).
Here's an example of what I'm doing:
for (var i:int = 0; i < 100; i++) {
var elem:MyElement = new MyElement();
elem.name = "elem" + i;
container.addElement(elem);
if (i == 99) {
elem.creationComplete = function():void {
PopUpManager.removePopUp(loadingDialog);
};
}
}
So as I've said, the dialog disappears before all the elements appear on screen. Is there a way to tell when all the custom elements have been added AND are currently showing on screen?
Update: To clarify, elem.creationComplete is just a custom property function that gets called when the element's creationCompleteHandler is called.

Answer 1

The elements, even though they have been added in the right order, they are not created in that order:
private function doStuff():void {
PopUpManager.addPopUp(myPopup, this);
for (var i:int = 0; i < 10; i++) {
var elem:MyElement = new MyElement();
elem.name = "elem" + i;
container.addElement(elem);
elem.addEventListener(FlexEvent.CREATION_COMPLETE, function(e:FlexEvent):void {
trace("i'm done " + e.target.name);
});
if (i == 9) {
elem.addEventListener(FlexEvent.CREATION_COMPLETE, function():void {
trace("i'll remove the popup " + elem.name);
PopUpManager.removePopUp(myPopup);
});
}
}
}
Gives:
i'm done elem5
i'm done elem7
i'm done elem0
i'm done elem8
i'm done elem6
i'm done elem3
i'm done elem9
i'll remove the popup elem9
i'm done elem1
i'm done elem4
i'm done elem2
You need to add a global variable to check that all the elements have actually been created:
public var created:int = 0;
private function doStuff():void {
PopUpManager.addPopUp(myPopup, this);
for (var i:int = 0; i < 10; i++) {
var elem:MyElement = new MyElement();
elem.name = "elem" + i;
container.addElement(elem);
created++; // <--- increment with each new element
elem.addEventListener(FlexEvent.CREATION_COMPLETE, function(e:FlexEvent):void {
created--; // <--- decrement when element is created
trace("i'm done ", e.target.name);
if (created == 0) {
trace("i'll remove it ", e.target.name);
PopUpManager.removePopUp(myPopup);
}
});
}
}
And the result is:
i'm done elem5
i'm done elem7
i'm done elem0
i'm done elem8
i'm done elem6
i'm done elem3
i'm done elem9
i'm done elem1
i'm done elem4
i'm done elem2
i'll remove it elem2

Answer 2

To solve this, I followed jidma's answer, except I listened for the PropertyChanged event and decremented when the contentHeight property changed on the container. This decremented only when the container's height was affected by the added element, which seemed to work.