Show a skeleton placeholder until Facebook Comments component loads completely in React (Next.js)

Question

Using Next.js, I want to show a skeleton placeholder until Facebook Comments component loads completely.

Here is the code.

import { useState, useEffect } from "react";
import { initFacebook } from "../utils/initFacebook";

export default function IndexPage() {
  const [loaded, setLoaded] = useState(false);

  useEffect(() => {
    const loadFacebook = async () => {
      await initFacebook();
      setLoaded(true);
    };

    loadFacebook();
  }, []);

  const skeletonComponent = (
    <div>
      <h1>Some skeleton placeholder</h1>
    </div>
  );
  const facebookComponent = (
    <div
      className="fb-comments"
      data-href="https://developers.facebook.com/docs/plugins/comments#configurator"
      data-width="580"
      data-numposts="10"
    />
  );

  return (
    <div>
      {loaded ? facebookComponent : skeletonComponent}
    </div>
  );
}

I'm using the state to switch between two components.

But the skeleton component does not wait until the Facebook component is fully loaded, and therefore users see the blank screen for about 3-5 seconds.

How should I go about having the skeleton component wait out until the Facebook component is visible?

The full code is available on CodeSandbox.

Any help would be appreciated.