Lazy Loading

[SteGreig]

I am using this for Facebook comments on my Gatsby site. It loads in SO many resources and really hurts the page speed - is there a way to modify this component so that the iframe can be lazy loaded?

<FacebookProvider wait appId="1234567890"> <Comments href="https://www.facebook.com/example" /> </FacebookProvider>

[azizoid]

Did you try using React's lazy loading function?

const FbPage = React.lazy(()=>import("./components/fbpage.component");

<React.Suspense fallback={<div>Loading...</div>}>
<FbPage />
</React.Suspense>

[SteGreig]

I've tried this but it doesn't seem to actually lazy load the component. The component imports and works fine, but it still loads all the Facebook resources in on the initial page load.

Is there anything else I can try, bearing in mind I'm using Gatsby? It's frustrating how difficult it seems to be to do so something as straightforward as lazy loading an iframe.

(sorry for the late reply!)

[seeden]

added official lazy property for each component