Custom button skin with scaleGrid 9 slice image does not appear in Design Mode

Question

So in a custom button skin I have a nine sliced image, and then throw that onto an MXML page. In design view, I cannot get the component to show the image that I've thrown on it. Unless I do a hack on the MXML page by adding the image in it's scaleGrid form to the page somewhere. Then it seems to act as like a preloader for the image so it actually displays. But I don't want to do this hack on every page that uses this component. Is there a work around?
Here's the button skin:
<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
                    xmlns:s="library://ns.adobe.com/flex/spark"
                    width.disabled="296" height.disabled="73">
<!-- host component -->
<fx:Metadata>
                    [HostComponent("spark.components.Button")]
                    [Embed('assets/art/shared/[email protected]', scaleGridTop=20, scaleGridBottom=85, scaleGridLeft=40, scaleGridRight=60)]
</fx:Metadata>
<!-- states -->
<s:states>
                    <s:State name="disabled" />
                    <s:State name="down" />
                    <s:State name="over" />
                    <s:State name="up" />
</s:states>
          <s:Group width="100%" height="100%" >
  <s:Image width="100%" height="100%" smooth="true" source="@Embed('assets/art/shared/[email protected]', scaleGridTop=20, scaleGridBottom=85, scaleGridLeft=40, scaleGridRight=60)"/>
</s:Group>
<!-- text -->
          <s:Label id="labelDisplay" left="10" right="10" top="2" bottom="2" horizontalCenter="0"
                               maxDisplayedLines="1" textAlign="center" verticalAlign="middle" verticalCenter="1"
                               color="#FFFFFF" >
  <s:filters>
                              <s:DropShadowFilter distance="0" angle="90" color="0x000000" alpha="1" blurX="2" blurY="2" strength="16" quality="3" />
  </s:filters>
</s:Label>
</s:Skin>
And then I throw that button into an MXML page. The image doesn't show up in design view.
<s:Button x="330" y="94" width="134" height="57" label="Button" skinClass="features.shared.NineSliceButtonSkin" />
This hack, fixes the button! And all other buttons that use that skin.
<s:Image width="100%" height="100%" smooth="true" source="@Embed('assets/art/shared/[email protected]', scaleGridTop=20, scaleGridBottom=85, scaleGridLeft=40, scaleGridRight=60)"/>
<s:Button x="330" y="94" width="134" height="57" label="Button" skinClass="features.shared.NineSliceButtonSkin" />

Answer 1

Looking for an answer too!