Flashing screen while loading with a custom loadingbar in valo theme

Vaadin 6 / 7 / 8
1

I modified the valo loading curtain to show a “modal” loading circle in the center of the screen.
After a while of loading (> 10s) the screen starts flashing.
I’ve seen that i’m not the only one having this problem, and i tried the solution from this Post (
https://vaadin.com/forum/#!/thread/8771546/8773315
)
Now my .scss file looks like this:

.v-window-modalitycurtain {
        @include animation(valo-animate-in-fade 400ms 100ms backwards);
    }
  .v-loading-indicator[style*="none"]
:before {
     display: none;
   }
   
   .v-loading-indicator-delay:before, .v-loading-indicator-wait:before {
    content: "";
    position: fixed;
    background-color: rgba(0,0,0,.5);
    background-image: url(images/loading.gif);
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: auto
}

Sadly I still have a flashing screen after a while of loading.

Does anybody knows a way how to solve this or sees an error in my code?
I’m using Vaadin v 7.5.7.

Thanks for helping

2


Valo - change loading indicator
 - another thread on the same topic. Maybe it will be more useful.

3

Thanks a lot!
Somehow I couldn’t find this thread.

The code below fixed my problem. Thanks for helping.

.v-loading-indicator-wait {
width: 96%;
.v-ff & {
width: 90%;
}
@include animation(v-progress-wait 5s forwards, v-progress-wait 4s infinite backwards);
}