Valo: loading indicator with modality curtain

Vaadin 6 / 7 / 8
1

Hi,

So far, I used a custom theme that modified the loading indcator to add a modality curtain.

Now, I intend to switch to Valo.
However, my approach for the modality curtain does not work any more.

Anbybody who has found a solition for that?

Thanks

2

I would also appreciate an answer for this…

3

Could you describe in a bit more detail what you did before (e.g. share the custom CSS you used), and maybe I can come up with a workaround.

4

Hi Jouni.

Here is the css I had before (taken from this forum somewhere and adapted slightly so the ‘grey’ affect doesnt happen for the first stage (although a modality curtain still exists).

I’ll admit I havent spent any time on looking at it in close detail, I am just currently in the process of evaluating how quickly we could switch to the valo theme (which is VERY nice)!

Thanks,
Lee.

    /**
    * Ensures that when the vaadin loading indicators are shown (long server trip), the MMI is locked
    * down (that is the user is unable to click on any other components). Whilst all stages (first at 300ms, second at 1500ms
    * and third at 5000ms) 'disable' the GUI by making the indicator full-size, a disabled effect (transparent grey) will
    * kick in at the second and third stages. We don't do the effect at the first stage, as a lot of actions were
    * just taking long enough for it to appear, only to then immediately disappear. Didnt look nice.  
    */
    .v-loading-indicator-wait.first, .v-loading-indicator-delay.first, .v-loading-indicator.first{
     top: 0;
     left: 0;
     margin: 0;
     padding: 0;
     background-repeat: no-repeat;
     background-position: top right;
     position: fixed;
     width: 100%;
     height: 100%;
     position: absolute;
     top: expression(document.documentElement.scrollTop + "px");
    }
    
    .v-loading-indicator-wait.second, .v-loading-indicator-delay.second, .v-loading-indicator.second,
    .v-loading-indicator-wait.third, .v-loading-indicator-delay.third, .v-loading-indicator.third{
     top: 0;
     left: 0;
     margin: 0;
     padding: 0; 
     background-color: #56595B;
     background-repeat: no-repeat;
     background-position: top right;
     opacity: 0.5;
     position: fixed;
     width: 100%;
     height: 100%;
     filter: alpha(opacity=50);
     position: absolute;
     top: expression(document.documentElement.scrollTop + "px");
    }
5

Here’s a workaround, should work in all browsers (no need for the IE expression since IE8 supports fixed positioning)

.v-loading-indicator-delay:before, .v-loading-indicator-wait:before { content: ""; position: fixed; background: rgba(0,0,0,.5); top: 0; left: 0; right: 0; bottom: 0; pointer-events: auto; } One issue is that you can’t specify IE filters on pseudo elements, so you either need to create a semi-transparent background image to create the transparency, or just accept that in IE8 your overlay is transparent. You can use a background-image to show a spinner also, using similar code, but for the :after pseudo element (there’s a suitable spinner GIF in Valo in valo/shared/img/spinner.gif).

6

Works - almost… Thanks!

If I use the CSS above, the “curtain” appears together with the loading indicator, which is good.

However, once it has disappeared, the UI does not react any more on mouse clicks…

7

Ah, right, I overlooked that. Add the following to hide it:

.v-loading-indicator.first:before {
  display: none;
}
8

Sure that it works?

I have now:

[code]
.v-loading-indicator.first:before {
display: none;
}

.v-loading-indicator-delay:before,
.v-loading-indicator-wait:before {
    content: "";
    position: fixed;
    background: rgba(0,0,0,.5);
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: auto;
}

[/code]I still have the same effect: after (longer) waiting the does not react any more on mouse clicks…

9

Sorry, I mistakenly thought that the style name is reset after the load sequence. You need to change it to this:

.v-loading-indicator[style*="none"]
:before {
  display: none;
}
10

Fantastic! Works!

Thanks a lot.

Markus

11

add image loading in center

12

hi,

can i listen to events of default loading indicator or hook or override? my goal is to show users the current progress of the page, not indeterminate.

Thanks.

13

My screen starts to blink if the loading process is too long (~< 5s) :frowning:

14

Jovert: You need some sort of extension to do that (client-side). Can’t tell you exactly what to do, but start looking at ApplicationConnection.java class and see where the loading indicator is activated:
https://github.com/vaadin/vaadin/blob/master/client/src/com/vaadin/client/ApplicationConnection.java#L479

Agata: thanks for reporting. Could you
post a ticket
 about that issue in the
Vaadin Trac
, and describe your browser and platform so we can perhaps replicate the issue ourselves.

15

Created:
https://dev.vaadin.com/ticket/18119

16

just stumble over this issue. The blinking comes from the indicator bar that is used for this trick. The indicator has a blinking animation after 5sec and you need to disable this animation.

17

This is a short version, that will not blink together with top progress bar
Note: it adds an invisible layer, not a gray one. If you change to gray, it will blink.

.v-loading-indicator:before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  pointer-events: auto; // force disable of mouse
}

.v-loading-indicator[style*="none"]
:before { // seach for display: none
  display: none;
}