Lightbox async lag

Ask the community
,
1

Hi everyone,

Im running this code on repeater. On moreInfo button click, lightbox pops up. The code is totally fine.

export function moreInfo_click(event, $w) {
 
        $w('#moreInfo').hide();
        $w('#loadingGIF').show();
        setTimeout(() => {
   $w('#repeaterPersonal').onItemReady(($item, data) => {
       $w('#loadingGIF').hide();
       $w('#moreInfo').show();
    $item('#moreInfo').onClick(async() => {
        wixWindow.openLightbox('profileLightbox', data._id);
 
 
    })
})
 
}, 3000);
}

Now the problem is that it requires to click MoreInfo button always 2 times so Lightbox can be opened. But 2 times is only for the each items on the very first time you click. So if i hoover and click on the item from repeater 3rd,4th etc. time, then it will open from first click.
If i remove async function, then this lag dissapears and all is smooth. But then i loose data from repeater item into lightbox.

Any ideas? THank you!

@Ahmad @Yisrael (Wix)

2

The problem is that you an onClick() event listener inside another onclick event listener.
Delete this one:

export function moreInfo_click(event, $w) {
}

Get rid of the setTimeout, you don’t need that.
Remove the “async” (you don’t need to wait for any promise)
Wrap the code inside:

 $w.onReady(() => {
//code comes here
})
3

@jonatandor35
Wow nice, thank you. Such a simple thing really made changes.
No more lag, all is very smooth.
How would you let loadingGif to work in this case? I would still love to have it

4 
$item('#moreInfo').onClick(() => {
    $w('#loadingGIF').show();
        wixWindow.openLightbox('profileLightbox', data._id)
.then(() => {   $w('#loadingGIF').hide();});
    })
5

J.D - Many thanks. I did the same but haven not inserted .then.
All problems solved. Great solution!