Hi , I have an application which have a login page and application page . I have created two themes login-theme and application-theme with their respective style.css and put them under VAADIN/themes/ . When i first go to the login page . The login theme is set for that page and when i go inside the application I set the application theme . Both the themes are successfully set but the problem is when i am setting the themes , there seems to be a lag between the two themes . I see a messy page for a second when switching between the two page. I found the second page without the theme during loading of the second page and when the page is loaded completely the theme is set properly . Am i doing anything wrong? Is there a way where i can switch themes without the problem i am facing . Surprisingly I didn’t see the problem in IE 9 but finds it in Firefox and chrome .
It is just a guess as I never tried to switch themes on the fly but I think that just after changing theme, the browser would need to download the new CSS, new icons, …
IE9 usually waits for things to load before displaying, FF, chrome and IE10 just try to show content as fast as possible so you would see the content of the page without any CSS.
To fix that problem you could try preloading the second CSS (would need you to fiddle with the servlet) or depending on the size of your css you could add to every window on login side a css class (like setStyleName(“login”)) and on your application give them a different class (like setStyleName(“myApplication”)) and then prefix all your CSS selectors keeping everything in the same theme :
.login .v-button{
/* style for button on login page */
}
.myApplication .v-button{
/* style for button on the rest of the application */
}