Out of Sync error with LazyLoadWrapper in LazyQueryContainer

I have the following use case. I have to lazy load N number of records using table so I am using LazyQueryContainer add on from Vaadin.
Each cell in the table has some image which needs to be loaded lazily so I am using another Vaadin add-on called LazyLoadWrapper.

But as soon as I scroll the table up and down I get the Out of Sync error. I have some idea why that might be happening because the client side LazyLoadWrapper might be trying to use the variable which has just been removed because of the lazy query container behavior of the table where it removes the elements from the table that are not in the range.

But I am not very sure if that is the issue here and in any case I want to know how to fix it.


Any Expert Suggestion?

Could you reproduce the issue without lazy query container? My wild guess would be that lazy load wrapper + table combination is to blame. Maybe a bug in lazy loading wrapper?

Is use of lazy loading wrapper in table absolutely needed? Table itself is already lazy. You could make it even more lazy by setting cache rate 0.

Thanks Joonas. My problem is that some of the elements in table rows can be a huge images so I want to show the table immediately while some of its images might load later otherwise what is happening that, it is very very slow because it waits for the image to be loaded before the table items can be rendered into the UI.

Is there any other way to lazy load these images inside the lazy table.

LazyLoadWrapper is probably the way to go for lazy loading large images. The problem could be that the table is attaching image components for only a short while to the UI while images are scrolled through and lazy load wrapper then tries to access the image after it is already detached from the UI. Still I am just guessing here as I did not try to reproduce the problem locally.

Some ideas for working around this issue:

  • Change the lazy loading mode in the lazy loading wrapper

  • Test the scenario with indexed container (just to be sure that the problem is related to Lazy loading wrapper)

  • Build and submit a test case where the issue could be reproduced outside your application

Out of curiosity - how the images can be that large if they are in table rows? Are you sure that you are not downscaling the images on client-side? If so, why not use smaller images?

Probably related to this issue we’re having:


Basically it seems that if you detach the wrapper before it renders it’s contents it will cause Vaadin to go out of sync.

This is it.

So it is basically a bug in Lazy Load Wrapper.


Yes, it seems to be a bug in LazyLoadingWrapper. I’ll try to take a look at it as soon as I find some extra time and see if I can do something about it. LLW definitely shouldn’t cause a “out of sync” error if it hasn’t rendered it’s component yet…

One question regarding the setup of your LazyLoadWrappers (so that I can reproduce the bug easier), do you have complex components (like layouts, tables etc) in the wrappers? LLW was originally designed to wrap simple components, like large images or Embedded-components… If this is the case, you could try to wrap only the actual component inside a LLW instead of the layout…

In our case the content of each wrapper us a bunch of components(textfields, nativeselects, checkboxes, labels mostly) inside a CssLayout, not sure if that would classify as “complex content”. Wrapping individual components isn’t an option for us I think, there would be too many wrappers on the page then.

Let me know if you need help with reproducing the issue.

In my case also the component is a complex layout that can contain any UI component based on the incoming UI meta-data. So its not just a simple image etc. However LLW should not care what component it is lazy loading, it should work for all components.

Let me know when can you provide the fix?

Thanks in advance,


I took a look at LLW over the weekend and found indeed that it caused a out of sync error when it tried to render a child component when it wasn’t attached anymore…

Attached to this post is a “alpha” version of the fix with added client-side debugging information. Could you test this out to see if it fixes your problem. If it does, I’ll clean it up a bit and package a new version to Vaadin Directory.
11630.jar (64.4 KB)

Seems to work in our application based on a quick test. Thanks for the quick fix.

Any suggestion on how to implement “hiding” a wrapper again to it’s original state, so that it’s lazy loaded when the component is reattached again? Currently we do it by creating new wrappers when the component is reattached, but it seems to cause some layout bugs and it’s probably not very performance friendly either.


Good to hear that it seems to fix the problem. :slight_smile:

Hmm, this could probably be possible to implement “manually”, so that you would (in the code) tell LLW to reset itself… As far as automating this, it might be hard, as the “detach” events don’t propagate. (i.e. if the wrapper is in a layout and the layout is detached, the wrapper will still believe it’s attached). But, you aren’t the first one to wish for this feature so it might be worth taking a closer look at… :slight_smile:

However, if you have a lazily loaded component that you wish to show/hide from time to time, you might want to try calling .setVisible(true/false) on the component. This will keep the component in the client-side DOM and speed up (a little) the rendering of the component when it’s shown the next time.

Are you there ?

Did you try 1.0.1 alpha?

Yes, I’m still here :)… Have you tried the alpha version of the fix? This should eliminate the Out-Of-Sync error in most cases. It’s a bit of a quick fix, but should enable you to continue development. I’m planning on cleaning it up a bit, and then releasing a 1.0.1 version of the Wrapper. The reason I decided to release a “unofficial” version of the fix, was to enable You to continue development on your applications (and provide some logging if the problem remains), while I finalize the fix. I didn’t have time to test it all that thoroughly, but I did test it with a table using lazy load and it seemed to fix the Out-of-Sync problem.

As for the timeline you were asking for:

For 1.0.1 I’ll clean up the fix and add it to the Vaadin Directory. (this week)

As for the next feature release (1.1) of the wrapper, I’m looking in to a way of resetting the wrapper. This should be relatively easy to implement manually, but I’m looking in to ways of doing this automatically as well when the wrapper is loaded/unloaded. This could be very relevant even for your use case with the Table as the wrapper would automatically reset itself when it’s reattached. (timeline: depends on the spare time I have, but hopefully within a month)

In my earlier post, I implied that the automation of the reset would be almost impossible to implement, however I might have found a way of doing this :), but it requires some restructuring of the current logic in LLW, so be patient. :slight_smile:

Just uploaded LazyLoadWrapper 1.0.1 to Vaadin Directory:

LazyLoadWrapper in Vaadin Directory

Thanks Perti and Joonas. It works fine so far.