How to make components not to change simultaneously from click event?

Flow
1

I use Vaadin 10.0.1. When I change components from button click event it changes them simultaneously. I need to change them one by one.
See the example:

countButton.addClickListener(buttonClickEvent -> {
  int input = Integer.parseInt(inputTextField.getValue());

  long factorialResult = countFactorial(input);
  resultFactorialLabel.setText("Factorial: " + factorialResult);

  try {
	sleep(1000); //just for example, could be some really long processing
  } catch (InterruptedException ignored) {
  }

  int fibonacciResult = countFibonacci(input);
  resultFibonacciLabel.setText("Fibonacci: " + fibonacciResult);
});

Here 10 seconds passes, then resultFactorialLabel and resultFibonacciLabel change simultaneously, when I want resultFactorialLabel to be changed and after that, in 10 seconds resultFibonacciLabel to be changed. How can I do it?

2

Updates are sent when the listener thread finishes so if you block it, you will block all updates until your listener has completed. You need a background thread and use either polling or push so that the server can tell the browser about changes which took place outside the listener code.

See https://vaadin.com/docs/v10/flow/advanced/tutorial-push-configuration.html