Vaadin 7 - how to override bootstrap reindeer theme

General
1

Hi guys,

I have a ugly effect :slight_smile: During the startup of my app the old reindeer theme is still present but the html-code is already (partical?) loaded.
And this combination shows the user for a couple of seconds (<2) a broken ui because the real theme is not active.

I have a workaround but this works not in IE :frowning:

session.addBootstrapListener(new BootstrapListener() {
          @Override
          public void modifyBootstrapFragment(final BootstrapFragmentResponse response) {
            // nop
          }
          @Override
          public void modifyBootstrapPage(final BootstrapPageResponse response) {
            // this code is a kind of workaround to "hide" most of the application html code until our real theme (valo based) is enabled
            // vaadin is using (hardcoded) reindeer during bootstrap-phase and reindeer together with our new ui's are causing this ugly
            // effect during startup where the html-code is ready but not all styling is there
            response.getDocument().head()
                .append("<style type=\"text/css\">.v-app.reindeer .v-ui > .jom-dt-main{display:none;visibility:hidden;}</style>");
          }
        });

Is there any other way to handle that?
Or is maybe something wrong with my theme css?
Please give me some hints :slight_smile:

Kind regards
Andreas

2

If you have already Valo based theme in your application, why did you not set it with @Theme annotation in your UI?

3

Because I have a “multi-theme” application where sometimes later “during” ui-rampup we call “setTheme” from javacode :slight_smile:

Maybe this is “too late”?

4

Any other idea?
Would it be possible for me to override Vaadin’s default “bootstrap theme resolving mechanism”?

5

Maybe this is “too late”?

Yes, if you call setTheme(…) from UI and have some other theme set by default in @Theme annotation, the default theme will show up short moment before changing.

6

Hmm :smiley: What can I do to “fix” this startup-css-effect? Is there a way to tell Vaadin to wait with showing the ui until everything is available in the browser (html, js, css) to show a complete ui?

7

I think this info should still apply

https://vaadin.com/forum/thread/12243078/applying-theme-lags-when-using-ui-settheme-instead-of-theme

8

Awesome Tatu … thank you very much … with your hint I was now able to fix this … great! :smiley: