显示一个骨架占位符，直到 Facebook Comments 组件在 React (Next.js) 中完全加载

问题描述

使用 Next.js，我想在 Facebook 评论组件完全加载之前显示一个骨架占位符。

这是代码。

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>
  );
}

我使用状态在两个组件之间切换。

但骨架组件不会等到 Facebook 组件完全加载，因此用户会看到大约 3-5 秒的空白屏幕。

我应该如何让骨架组件等待 Facebook 组件可见？

完整代码可在 CodeSandbox 获得。

任何帮助将不胜感激。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）