After long testing the virtual lists with expandable cards with dynamic content I have come to some conclusions:
Because the expandable card use a cover image to show as a preview image when opened and closed, and it is always the same image…
and we needed to show an image gallery when the expandable card is opened…
I needed to hide the cover image and replace it with a swiper gallery when card:beforeopen event is trigger… and I set also the observer parameter of the swiper and html to TRUE.
Then the swiper gallery is opened with three slide images that it will updated once the Ajax call finishing loading the rest of images… this happens also when card:beforeopen event is trigger.
Anyway the card is opened instantly not waiting the the Ajax call to finish loading all the rest of images missing in the json.
After the Ajax call response is finished, the json is updated with $setState…
here the video link showing the problem:
A jump effect showing that the images slides has been changed or updated is clearly shown even if we made use of the setting observer to true for the swiper gallery…
this occurs when Ajax finishes loading more images and $setState change the object data for the images.
I guess the observer to true it is not working properly inside the virtual list or does not work properly inside the expandable card too.
1 - is there a way to fix this issue with the observer to true ?
2 - is there a way to avoid opening the card when card:beforeopen event is trigger and wait better Ajax to finish loading the rest of images so I do not need to refresh the slides once the card is opened and avoid this jump effect?
I will also appreciate your reply regarding this maybe you have some quick solutions for this to work properly.
Thanks a lot again Vladimir