Vaadin24 locking the screen for a during of time

Hello,

I apologize, my English is bad.

With Vaadin 24, when a button is clicked and a process takes between 1 second to 1 minute to complete, I want to lock the screen during this time, preventing the user from doing anything. How can I achieve this?

You can create a modal dialog then close it on the server side when the process is done.

You will need to activate the push.

The user won’t be able to do anything outside the Modal Dialog.

You have some examples without a Modal dialog but with a progress bar:

1 Like

Technically it might be also possible by just changing the style of the loading indicator to look more like a splash screen that takes up the whole page. I’ve seen companies doing that in the past.

How can I enable push?

hello
how do i do this?

I need to do something similar to this. How do I do this with the loading indicator?

I don’t have an example on hand. You need to use CSS or JS to customize the .v-loading-indicator

ok ı do it

  1. setApplyDefaultTheme(false)
@SpringComponent
public class ServiceInitListener implements VaadinServiceInitListener {
    @Override
    public void serviceInit(ServiceInitEvent event) {
        event.getSource().addUIInitListener(uiInitEvent -> {
            uiInitEvent.getUI().getLoadingIndicatorConfiguration().setApplyDefaultTheme(false);
        });
    }
}
  1. style.css edit

.v-loading-indicator {
    position: fixed; /* Occupy whole screen even if scrolled */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Eat mouse events when visible, doesn't prevent scrolling */
    pointer-events: auto;
    /* Animated with delay to prevent flashing */
    animation: fadein 0.3s ease-out 0s normal 1 both;
    z-index: 2147483647;
}

.v-loading-indicator::before {
    content: "";
    position: fixed;
    background-image: url(icons/icon.png);
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: contain;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: auto;
}

@keyframes fadein {
    0% {
        background: rgba(0, 0, 0, 0);
    }
    100% {
        background: rgba(0, 0, 0, .5); /* Darkens the UI */
    }
}


1 Like

Looks like it was a pretty easy task! Good job!