Wait cursor for long-duration operations

Vaadin 6 / 7 / 8 Framework UI
1

Hi,

please, does somebody know how can I show wait cursor when the user is waiting for long-duration operations? I know that there is a loading indicator at the top-right corner, but I have experiences that users do not notice it and they are angry that the application does nothing.

Thank you very much in advance.

2

You can use the [tt]
cursor
[/tt] property in CSS to set the mouse pointer. See
an on-line example
.

3

Hi!

If the process takes a long on the server side, you run it in a thread and display ProgressIndicator while it is run.

cheers,
matti

4

Running background thread is the idea I needed to know.
Thank you very much!

5

Petr, you can also change the Vaadin’s loading indicator to another image and location, say,making it larger and more noticable at the screen center.

But sure, if you’re doing some expected long duration operations and backend part of your application or infrastructure does not permit you to spawn a threads, it is better to run that operation in a thread and display a progress indictor widget at the client side - this way client interface will not stuck and also user will be able to perform other activities in your app while the long task is completing.

In our apps we usually doing both - tweaking the loading indicator to make it more noticable and also delegating long runnings ops to a separate threads.

As for tweaking the loading indicator, you here is the sample from our app - it moves it to the center of the browser window and also uses a custom animated gif image which contains much larger wheel:


.v-loading-indicator, .v-loading-indicator-delay, .v-loading-indicator-wait {
    background: url(img/infinite2.gif) no-repeat center;
    position: fixed !important;
    width: 65px;
    height: 65px;
    top: 50%;
    left: 50%;
    z-index: 30000;
}
6

A very small detail but I’m afraid the code above will not work if you have a popup window, you might need to execute js after the vaadin window popup to figure out z-index and configure accordingly
i.e. with jquery,


$(function(){
   var maxZ = Math.max.apply(null,$.map($('body > *'), function(e,n){

           if($(e).css('position')=='absolute')

                return parseInt($(e).css('z-index'))||1 ;

           })
    );
$('.v-loading-indicator, .v-loading-indicator-delay, .v-loading-indicator-wait ').css('z-index',maxZ);
//console.log(maxZ);
//alert(maxZ);
});
7

Dmitri, thank you for your response.
I have already made a window which is shown just before a longer request and hidden after the request is done. Your solution with tweaking the loading indicator works as well, but not so well as the solution with window :wink: I think it is because of delays between requests on the client.

8

Hello,
I applied the code from example (Java and CSS) and the custom style does not get loaded. When I inspect the css with firebug I cannot see the new style to be set (cursor:wait)

Do you have any idea what could be wrong? I have some hierrarchy of custom templates with html in my window.

When I use the example code in a separate project, everything is ok, and the cursor is updated properly.

Thanks and regards,
Dinko

9

This should not be necessary, since all Vaadin sub-windows start stacking up from 10 000. Other overlay elements live above 20 000, and tooltips might live a bit higher than that. But making the z-index above 40 000 should be enough, no need to adjust it with JS after that.

10

This could be an issue with deployment or theme settings. You’re using a custom theme, right, and you have called setTheme(“my-theme”) somewhere in your application? Can you get any CSS modifications to show up on the client, or is it just this one particular loading indicator style that isn’t working?

Custom templates (CustomLayouts?) shouldn’t have any affect on this.

Can you see any differences in your actual project and the separate project?

11

Hi,

Thanks for the supplied CSS example to change the appearance of the load-image. Just one extra question: do you know how to make the rest of the application ‘grayed-out’ while the load-image is visible. Is this possible using CSS?

Thanks,
Jan

12

You could stretch the loading indicator element to fill the whole screen, apply a background color to it and set the opacity below 1. Or you could specify a rgba color as the background color instead of the opacity trick, but this will not work in all supported browsers (namely IE).

13

Hello Jouni,
Thanks for the reply. Yes, I’m using a custom theme (overriding reindeer) and the modifications show up in the client, I just don’t see the cursor change.

To test example I created separate project (again custom theme with custom template) and the example worked.
I’m not sure are there any other significant differences between my actual and example project.

Thanks again and regards,
Dinko

14

hi!

I can´t use the
v-loading-indicator
over Window?

-Pblo