Applying theme lags when using UI.setTheme instead of @Theme

Flow
1

Hello all,

In our application we use setTheme instead of @Theme to provide the user with the ability to change the theme on-the-fly. However, when the browser displays the UI for the first time, or when we do a refresh (F5) our application is shown with Vaadin default theme (not Valo, but the one you get if you remove all @Theme and setTheme) for a very short time (from 1/10th of a second to a whole second). Our UI are not particularly complex so there’s few improvements we can do on our side.

I have also created a simple Vaadin application with just a MenuBar with 3 items, and each time I refresh the page, the app is shown with Vaadin default theme. When I use @Theme, the problem doesn’t appear.

Is this a bug? Can we do something about it in our app? Thanks!

PS: We use setTheme in the UI.init method.
Vaadin 7.5.10, Chrome 48

2

Up!

3

Leif wrote an excellent blog on this topic on how do theme seting via UIprovider.

http://vaadinsolutions.blogspot.fi/2016/02/dynamic-theme-selection-without-flicker.html?m=1

There is another thread about setting theme issue here:

https://vaadin.com/forum#!/thread/1154742

4

Thanks a lot! I will look into those two links.

EDIT, here’s the code I used and it works perfectly now:

@WebServlet(...)
public class MyServlet extends VaadinCDIServlet {

    @Override
    protected void servletInitialized() throws ServletException {

        super.servletInitialized();

        getService().addSessionInitListener(e -> {

            e.getSession().addUIProvider(new CDIUIProvider() {

                @Override
                public String getTheme(UICreateEvent event) {
                    return MyApplicationCache.getThemeName();
                }
            });
        });
    }
}