GWT Bootstrap3 Button icons show up very late (lag)

Question

In the video i uploaded on screencast you see the reload of my GWT Bootstrap3 (see https://gwtbootstrap3.github.io/gwtbootstrap3-demo/) project. The page I display is almost empty (so there are not other icons which need to be displayed). The video starts when I hit the F5 key on my chrome browser. You'll notice that the screen reloads then the buttons show up as blank squares which are then filled oiut with the icons. http://www.screencast.com/t/dd7B9lr6

How can I manage to show them up with their icons immediately

The buttons are placed within a Vertical Panel as a ButtonToolbar within ButtonGroups

[...]

<g:VerticalPanel addStyleNames="{styles.tables.listBeanTable} ub-AbstractSummaryWidget">                                        

        <b:ButtonToolBar addStyleNames="{styles.summary.menuBar} hiddenPrint">
            <b:ButtonGroup >

                <b:Tooltip title="{msgs.refresh}" container="body">
                    <b:Button ui:field="refreshButton" icon="REFRESH"/>
                </b:Tooltip>
                <b:Tooltip title="Delete meeting" container="body">
                    <ui:attribute name="title" description="Label for button: delete meeting"/>
                    <b:Button ui:field="deleteMeetingButton" visible="false" icon="REMOVE"/>                    
                </b:Tooltip>

[...]

I am not sure whether exactly when the icons are drawn to replace the squares. Is it with the call to " initWidget(uiBinder.createAndBindUi(this));" within the constructor class of the widget?

If you were about to say: hey buy a more powerfull laptop then it'll display faster. The gwtbootstrap3 example (e.g. https://gwtbootstrap3.github.io/gwtbootstrap3-demo/#icons) ) shows up immediately correct.

Thanks for any help Hannes

Answer 1

The icons are loaded from Font Awesome. They are just <i> tags with the appropriate CSS style applied - this style forces the content of the <i> tag to become the desired icon. My bet is that the problem is that the font is not being loaded "fast enough". Maybe it's not cached? Maybe it's loaded from a slower server? Check your browser's developer tools to see from where the font is loaded and how long it takes. It should loaded from a folder relative to your webapp, unless maybe when you are using the GwtBootstrap3CDN.gwt.xml module.

Answer 2

What really resolved the issue was the change to gwt 2.7. all performance issues disappeared. Furthermore in the case above it helped a bit to set the ButtonToolBar invisible (setVisible("false")) in the ui.xml. and at the end of the Ctor make it visible "setVisible("true).