3

I am using Vaadin 8 and the LoadingIndicator is causing me some problems. For 90% of the time I need it to be set accordingly:

  • 1st delay == 300ms
  • 2nd delay == 600ms
  • 3rd delay == Integer.MAX

But for some specific actions I need this to be modified, so that the Overlay (Loading Indicator) is displayed instantly, instead of waiting the preconfigured 300ms. For example when I click a button I want it to be displayed instantly. This, however, is problematic, because if I set the first delay to zero during the processing of the button click event, it is only applied after the event is finished. For this reason I want to execute some JS method, which would set this delay to zero. I have tried just straight up calling the JS method to display the overlay instantly, but it is still influenced by the LoadingIndicatorConfiguration.

Edit: At the moment, the working (not best) solution I came up with is to create a CSS class that mimics the v-loading-indicator and create a JavaScript method that adds a div element at the beginning of the body element and then adds this CSS class to the div element. Then when the button is being created I execute (again using JS - this is critical) addEventListener on this div and add the method to show the loading indicator.

Tatu Lund
  • 9,949
  • 1
  • 12
  • 26
Michael Kročka
  • 617
  • 7
  • 22
  • Could you share us the code how you are setting the values of the LoadingIndicatorConfiguration? – Tatu Lund Oct 26 '21 at 12:31
  • For example, setting the first delay: `getUI().getLoadingIndicatorConfiguration().setFirstDelay(300);` – Michael Kročka Oct 26 '21 at 12:56
  • 1
    Yes, that looks correct. Also, normally UI is updated only after request has been fully processed. Thus setting the delay before button being clicked works, but not when done after the click. – Tatu Lund Oct 27 '21 at 06:12

1 Answers1

2

Normally the UI in the Browser is updated only after request has been fully processed. Thus setting the delay before button being clicked works, but not when done after the click. To change this you need to enable Push for immediate updates of the UI. Try the following code with and without Push and you should see a difference in loading indicator behavior.

@Push
public class DemoUI extends UI {

    protected void init(VaadinRequest vaadinRequest) {
        VerticalLayout layout = new VerticalLayout();
        layout.setSizeFull();

        Button loadingButton = new Button();
        loadingButton.addClickListener(e -> {
            getLoadingIndicatorConfiguration().setFirstDelay(0);
            getLoadingIndicatorConfiguration().setSecondDelay(1000);
            getLoadingIndicatorConfiguration().setThirdDelay(2500);
            try {
                Thread.sleep(5000);
            } catch (InterruptedException e1) {
        });
        layout.addComponent(button);
        setContent(layout);
    }
}

@WebServlet(value = "/*", asyncSupported = true)
@VaadinServletConfiguration(productionMode = false, ui = DemoUI.class)
public static class Servlet extends VaadinServlet {
}
Tatu Lund
  • 9,949
  • 1
  • 12
  • 26