Item Renderer Display Optimization

Question

I have pretty basic row item renderer displayed within a data group, it is composed of a few labels and an icon. It has a few nested layouts to display everything properly, but I would not consider it a complicated layout by any means.
Whenever I display a result set, 20 rows of data, it appears Flex is choking displaying the item renders. It takes about half a second from the moment all the item renders have been created to actually draw them on the screen and the Flex code that handles the drawing appears to be blocking because everything on the screen freezes during this half second period. This display blocking turns a very fluid display rich application into a choppy mess whenever results are displayed.
I have gone great lengths to make sure none of my code is blocking and that I always give Flash Player the room it needs to breath to maintain it's frame rate, however I am stuck with this display issue. Any suggestions would be appreciated.

Answer 1

Thanks for the reply Sasha. I will try an AS item renderer but I have to say that data binding and layout management are probably the two biggest reasons to use Flex in the first place. If I can't use those items and have a smooth interface I might as well go back to just writing everything using Flash. (this is a little bit irritating to say the least)
Below is the code to one of the item renderers that is casuing probelms...if anything sticks out as wrong or out of place please let me know.
I appreciate your time, and response. Thank you.
<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
                xmlns:s="library://ns.adobe.com/flex/spark"
                xmlns:mx="library://ns.adobe.com/flex/mx"
                autoDrawBackground="false"
                width="100%" height="76"
                mouseChildren="true"
                click="clickHandler(event)"
                buttonMode="true"
                useHandCursor="true" >
    <fx:Script>
        <![CDATA[
               //removed
        ]]>
    </fx:Script>
    <s:states>
        <s:State name="hovered" />
        <s:State name="normal"/>
    </s:states>
    <s:transitions>
        <s:Transition fromState="normal" toState="hovered">
            <s:Parallel>
                <s:Fade target="{backgroundRollover}" alphaFrom="0" alphaTo="1" duration="0"/>
            </s:Parallel>
        </s:Transition>
        <s:Transition fromState="hovered" toState="normal">
            <s:Parallel>
                <s:Fade target="{backgroundRollover}" alphaFrom="1" alphaTo="0" duration="0"/>
            </s:Parallel>
        </s:Transition>
    </s:transitions>
    <!-- background fill -->
    <s:Rect id="background" width="100%" height="100%" alpha="0">
        <s:fill>
             <s:SolidColor color="#FFFFFF"/>
         </s:fill>
    </s:Rect>
    <!-- background rollover fill -->
    <s:BorderContainer id="backgroundRollover" width="100%" height="76" styleName="borderContainerLight" cornerRadius="0" alpha="0" borderAlpha="0"/>
    <!-- border bottom-->   
    <controls:HDivLine bottom="0"/>
    <!-- content -->
    <s:HGroup id="row" width="100%" height="100%" gap="12" paddingLeft="12" paddingRight="12" verticalAlign="middle" horizontalAlign="center">
        <!-- place -->
        <s:Group>
            <s:layout>
                <s:VerticalLayout horizontalAlign="center"/>
            </s:layout>
            <s:Label id="position" text="{data.index}" styleName="small light" width="20" textAlign="center"/>
        </s:Group>
        <!-- box art -->
        <s:Group id="boxArtGroup" >       
            <controls:ImageLoader id="boxart" source="{data.boxArtPath}" width="64" height="64" click="btnQuickView_clickHandler(event)"/>
        </s:Group>
        <!-- title and esrb rating -->       
        <s:Group width="60%" minWidth="160">
            <s:layout><s:VerticalLayout horizontalAlign="left"/></s:layout>
            <s:Label id="title" text="{data.title}" styleName="large bold" width="100%"/>
            <s:Label text="ESRB: {data.esrbRating}" styleName="small light"/>
        </s:Group>
        <!-- platform icon -->
        <s:Group width="10%" minWidth="82">
            <s:layout>
                <s:HorizontalLayout horizontalAlign="center" />
            </s:layout>
            <s:BitmapImage source="{PlatformIcons.getIcon(data.platform)}"/>
        </s:Group>
        <!-- release date -->
        <s:Group width="20%" minWidth="74">
            <s:layout><s:VerticalLayout horizontalAlign="center"/></s:layout>
            <s:Label text="{data.releaseDate}" styleName="bold"/>
            <s:Label text="release date" styleName="small light"/>
        </s:Group>
        <!-- rating average -->
        <s:Group width="10%" minWidth="74">
            <s:layout><s:VerticalLayout horizontalAlign="center" verticalAlign="middle"/></s:layout>
            <controls:RatingBoxSmall width="48" height="48" ratingType="RATING" ratingNumber="{data.memberRating}"/>
        </s:Group>
    </s:HGroup>
</s:ItemRenderer>