ProgressBar not appearing on button click

Flow
1

I have created a ProgressBar this way:

In the man layout → 

ProgressBar progressBar = new ProgressBar();
Div progressBarLabel = new Div();
progressBar.setIndeterminate(true);
progressBarLabel.setText("Generating report...");
progressBarLabel.setVisible(false);
progressBar.setVisible(false);
add(progressBarLabel,progressBar);

Within the button click listener → 

someButton.addClickListener( event -> {

progressBarLabel.setVisible(true);
progressBar.setVisible(true);
//do some tasks
progressBarLabel.setVisible(false);
progressBar.setVisible(false);

});

But, the ProgressBar is not getting displayed on button click. What am I doing wrong here?

2

What happens during //do some tasks. Are you running some long-running task? If so, that’s blocking the response.

3

I covered how to handle long running tasks like this in a video a while back https://www.youtube.com/watch?v=ZywjOZYWBuQ

4

yes, it takes about 2-3 seconds
But before that, I make the progressbar visible.
Thank you for the video, let me check it out…

5

The problem is that that entire code block runs synchronously during the same request.

So the progress bar gets set to visible and then invisible again during the same request. The client only gets the latest state, which is that the progress bar is invisible.

6

The video should do a better job of explaining it, hopefully :slightly_smiling_face:

7

got it
Let me try it out…
Thanks for the explanation :slightly_smiling_face:

8

I added @Push in MainLayout
But, I get an error:

com.vaadin.flow.server.InvalidApplicationConfigurationException:

Found app shell configuration annotations in non `AppShellConfigurator` classes.
Please create a custom class implementing `AppShellConfigurator` and move the following annotations to it:
    - @Push from com.keepvideo.application.views.MainLayout

unknown.png

9

Yeah, you’ll need to move the annotation in newer Vaadin versions

10

my spring boot main class implements AppShellConfigurator
So, can I move in there?

@EnableAsync
@Push
public class Application implements AppShellConfigurator {

    public static void main(String[] args) {
        SpringApplication.run(Application.class, args);
    }

}
11

Yes :+1:

12

I followed the video to make the necessary changes. But the progressbar is still not visible.
I could see the page is loading, but progressbar is not displayed :frowning_with_open_mouth:

My spring boot main class have both @EnableAsync
& @Push annotations.
async_service.png

13

unknown.png

14

vaadin version → 23.2.0

15

I even tried a Dialog with dialog.open()
that is not working inside a click listener as well
I tried all permutations and combinations for ProgressBar but no luck.
It’s bit weird that Vaadin new version is not giving the expected output for the working examples from an year back.
Let me know if I can send my code for your quick review.

Update:
I further troubleshooted the issue and found that the execution is in below order:

  1. restService.download() happens first
  2. progressBar.setVisible(true) happens next
    3)progressBar.setVisible(false) happens next

Since (2) & (3) are happening adjacent, there’s no ProgressBar shown on the UI. This is happening even if I have an async method (restService.download()) & async is enabled in spring boot with @EnableAsync annotation.

Note:
All the three steps mentioned above are happening within AddClickListener of button.

16

Hi @secure-leopard! In the meanwhile I’ve talked with @keen-quelea .
As far as I know and saw, the @Push and the @Async method with Thread.sleep was OK, but in his callchain (in the same method) there was a ListenableFuture<ResponseEntity<String>> downloadUrlResponseFuture = restService.download(...); downloadUrlResponseFuture.get().getBody();
where the get() method blocked the whole thread and was waiting for the ListenableFuture’s result. So this method wasn’t really async, and when it returned immediately called the result callback part where the progressBar visibility set back to false again (that’s mean the progressBar wasn’t visible almost never)…
Now it seems working…
Thanks for helping @secure-leopard