Can the Person component be lazy loaded ?

[ortegarenzy]

We are currently using the Person component in React, and I do wonder if we can enable lazy loading the images ?

[gavinbarron]

In React all component can be loaded asynchronously on demand via React.lazy and Suspense.

Could you outline your intended scenario in a little more detail to help me understand what you're trying to accomplish?

[ortegarenzy]

I was thinking more of the image itself being loaded in Person component to be lazy loaded(not the component), just like how native image tags works. In that case, the Person will not fetch for the image right away but only if it is visible on the viewport.

[gavinbarron]

Ahhh gotcha, adding a lazy load behavior for the image is an interesting idea for sure.

At present this is not possible and would require significant refactoring across the entire component codebase to provide this as part of the component itself.

I'd recommend building a wrapper component that leverages the IntersectionObserver api to conditionally render its children. There are loads of libraries that provide hooks for to wrap this api out there. (If you're using hooks already)

[ortegarenzy]

Yes, I think that would be the ideal approach right now to support such behavior. Appreciate the response!