Custom Loading screen

Vaadin 6 / 7 / 8 Framework UI
1

Hi,

In a recent discussion with Joonas about application performance and loading time he advised (among other things) to setup a loading screen

After having had a look at the javadoc I tried to override the method with a dummy implementation:


protected void writeAjaxPageHtmlMainDiv(BufferedWriter page, String appId, String classNames, String divStyle) throws IOException {
		page.write("<div id=\"" + appId + "\" class=\"" + classNames + "\" "
                + (divStyle != null ? divStyle : "") + "> this is my test </div>\n");
        page.write("<noscript>" + getNoScriptMessage() + "</noscript>");
}

The result I get was strange, the message “this is my test” appears at the top of the screen. Then sometimes it stays, sometines it disappears.

What implementation should I provide to fulfill my needs ? Or is there another strategy to follow to achieve the same goal ?

Nicolas

2

How about something like this:

protected void writeAjaxPageHtmlMainDiv(BufferedWriter page, String appId,
            String classNames, String divStyle) throws IOException {
        page.write("<div id=\"" + appId + "\" class=\"" + classNames + "\" "
                + (divStyle != null ? divStyle : "") + ">");
        page
                .write("<div id='splashscreen'>Welcome to my fancy application!<br/>"
                        + "Please wait patiently while it is loading...</div>");
        page.write("</div>\n");
        page.write("<noscript>" + getNoScriptMessage() + "</noscript>");
    }

and put the following to the theme:

#splashscreen {
	display: none;	
}

.v-app-loading #splashscreen {
	display: block;	
	background-color: white; 
	margin: 200px auto; 
	width: 300px;
	padding: 100px;
	border: 1px solid #aaa; 
}

To make the splash screen show a bit longer, IView should remove i-app-loading class only until the updateFromUIDL is called for the first time, not in the constructor. Created
a ticket for it
.

3

I just migrated to version 6.5.4. It seems the method
writeAjaxPageHtmlMainDiv
 is not present anymore. Is there any replacement ?

Nicolas

4

It is there in AbstractApplicationServlet, but has one additional parameter (HttpServletRequest).

5

There were some changes in 6.5.1 and 6.5.4 related to this. The method writeAjaxPageHtmlMainDiv is still there but the HttpServletRequest has been added as a parameter. Also starting from 6.5.4 the v-app-loading is a div inside the main v-app div and all contents of the main v-app div is removed when the application starts. You should thus be able to add whatever fancy loading screen you like inside the main v-app div (in writeAjaxPageHtmlMainDiv) and it will be removed automatically when the application starts (no need to worry about display:none etc).