layout.replacecomponent + image

I have grid of images:

// grid
GridLayout gridLayout = new GridLayout(2, 2);
gridLayout.setHeight(100, Unit.PERCENTAGE);
// images
Image image = new Image(null, new ThemeResource("image.jpg"));
mage.setHeight(100, Unit.PERCENTAGE);
gridLayout.addComponent(image, column, row);

Then Im tryring to update images dynamically with poll:

// poll
UI.getCurrent().addPollListener((UIEvents.PollListener) pollEvent -> {
Image image = findOldImage();
Image newImage = findNewImage(); 
newImage.setHeight(100, Unit.PERCENTAGE);
gridLayout.replaceComponent(image, newImage);
image = oldImage;

The problem is that I can see blinking during image update. It looks like there is empty space instead of image for millis and the new image appears.
I have about 4 images now and it looks very ugly.

Any suggestion how to avoid this blinking?


Flickering could be due GridLayout resizing the widths of the cells according to images being changed. There was a bug in GridLayout that resizing was incorrect, and fix of that bug has side effect of flicker in some cases. If your images are of fixed size, then it could be solved by setting fixed widths to GridLayout cells as well.

One approach in your case could be to study the new Board component, and if that fits your needs.

Flickering could be due GridLayout resizing the widths
It makes sense.

Board is a part of “pro”. Im doing small app for myself so can’t use it.