React + Next.jsでX(Twitter)のタイムラインを表示する際にローディングを実装する

環境

React 18.2.0
next 12.3
antd 5.11.5

はじめに

X(Twitter)のタイムラインを埋め込んだ際に、表示に 1~2 秒のタイムラグがあってモヤモヤしたのでローディングを出してみようと思います。

実装編

以下、実装です。

import { Skeleton } from "antd";
import Script from "next/script";
import React, { memo } from "react";

export const TwitterTimeline = memo(() => {
  return (
    <>
      <a
        className="twitter-timeline"
        href="https://twitter.com/ryota_shimajiri?ref_src=twsrc%5Etfw"
      >
        <Skeleton />
      </a>

      <Script async src="https://platform.twitter.com/widgets.js" />
    </>
  );
});

解説編

実装では a タグ内にantdの Skeleton コンポーネントを定義しています。
https://publish.twitter.com/# で生成した URL だと Tweets by 〇〇 があるところですね。

widgets.jsが className="twitter-timeline"を持つ要素を見つけると、その要素を X(Twitter) のタイムラインウィジェットに置き換える処理を行います。この処理の過程で元の a タグはウィジェットによって置き換えられて、DOM 上から消えます。

これを利用して、ローディングの切り替えを行なっているというわけです。

まとめ

a タグが置き換わるのを見逃していたので、twttr.widgets.load()とかでどうにか出来ないかとか色々試行錯誤したりしてましたが、灯台下暗しでした。

どなたかの参考になれば幸いです ✋