lazy load not working for hidden tabs

[kevalbhatt]

I have 3 tabs. and the second tab has list of cards, now when I click on the second tab then I am not able to see a card with images unless I scroll.

I debug code and found that viewport plugin is giving me trouble.

I saw one method in your document.

import { checkElementsInViewport } from 'react-lazy'

// now you're being a very lazy dev...
setInterval(checkElementsInViewport, 250)

But I don't know how it works.

Do I need to call checkElementsInViewport when I click on 2 tab?

[Merri]

Yes, you have to manually call checkElementsInViewport() when opening a tab. Alternatively the setInterval trick works, but it will cause continuous extra CPU consumption.

This complexity is the downfall of giving control of the performance impact of lazy loading: I didn't want to make a solution where there is a hidden performance impact.

I'm planning on making a v1 release that uses IntersectionObserver, which in turn won't require having checkElementsInViewport as it handles this issue better.