Question

I have been working on a project in GWT for which i need to show a loading image as like “Please Wait…”.

I was able to fix this till page loads. But during history token changes, i cant show the same. I created a division as shown below,

<div id="loader">
            <div id="loaderPanel">
            </div>
            <div id="loaderImage">
                <div id="loaderText">
                    <b>Please Wait...</b>
                </div>
                <img src="images/loader.gif"/>
            </div>
        </div>

Also, here is my CSS

#loaderPanel {
    background-color: white;
    display: block;
    height: 100%;
    left: 0;
    opacity: 0.8;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1001;
}


#loaderImage {
    background-color: transparent;
    left: 48%;
    position: fixed;
    top: 48%;
    z-index: 1002;
}

#loaderImage img{
    height:22px;
    margin-left:4px;
    margin-top:0px;
    width:119px;
}   

#loaderText{
    font-family:'Verdana';
    font-weight:bold;
    font-size:0.9em;
    float:left;
}

This is the piece of code i used to make the DIV visible & invisible.

DOM.getElementById("loader").getStyle().setDisplay(Display.NONE);
DOM.getElementById("loader").getStyle().setDisplay(Display.BLOCK);

Can anyone please suggest me a better way to show a loading GIF image for History Changes?

Answer 1

I got the Answer,

It was not showing the Loading Image because the execution locally was much faster. But when it comes to production mode, i found that, it is showing a loading image for a while.

Since my client strictly needs to show the loader, he suggested me to add a small delay. So i added the delay inside a Timer Scheduled. By the time it shows the loader, i did the Pre-Fetching of the Images and other objects used in the page.

So i mark my question as Closed…