Vaadin show ProgressBar, then XHR then hide progress bar

Question

Right now I use PUSH in order to asynchronously update my Vaadin UI.

I use the following code pattern:

ProgressBar progressBar = new ProgressBar();
progressBar.setIndeterminate(true);
add(progressBar);

var ui = VaadinUtils.lockCurrentUIForPush();
listenableFuture.addCallback(decisionMatrixPage -> {
    ui.access(() -> {
         progressBar.setVisible(false);
         ui.push();
    });
});

Is it possible to do the same but without PUSH but only with plain XHR request? Under XHR I mean the same Vaadin logic and not the call to some other non-Vaadin REST API.

I mean to use /?v-r=uidl&v-uiId=1 instead of /VAADIN/push?v-r=push&v-uiId=1

For example on button click I show the ProgressBar, then do the XHR request (/?v-r=uidl&v-uiId=1) to the server and based on the response update the UI and hide the ProgressBar.

I'd like to leave PUSH only for notifications and use plain XHR for different user requests to update UI but with ProgressBars. Is it possible with Vaadin and if so, could you please show how?

Answer 1

Vaadin does not have such API, but there is integrated loading indicator (thin blue bar at top) which appears when synchronous request takes long. So your best option is to try to style it. E.g. if you want it to appear prominently in the center of the display, try following in your styles.css:

vaadin-connection-indicator {
    position: fixed;
    z-index: 251;
    top: 50%;
    width: 20%;
    left: 40%;
}

.v-loading-indicator {
    position: unset !important;
    height: 10px;
    z-index: unset !important;
    left: unset !important;
    top: unset !important;
    right: unset !important;
}