分かった気になるDynamic Import②

ローディング中のコンポーネントについて

最初のページには表示されないコンポーネントがあることがよくあります。
例えば、viewport (画面内)に直接表示されないが、ユーザーがスクロールダウンしたときみ読み込まれる lazy-loading画像 です。

すべての画像を即座にリクエストしているわけではないので、最初の読み込み時間を短くすることができますね。

当然、React でも同じことができます。

コンポーネントがviewportにあるかどうかを知るには、IntersectionObserver API を使用するか、react-lazyload や react-loadable-visibility などのライブラリを使用して、可視性に関する読み込みをアプリケーションに簡潔に追加することができます。

import React from "react";
import Send from "./icons/Send";
import Emoji from "./icons/Emoji";
import LoadableVisibility from "react-loadable-visibility/react-loadable";

const EmojiPicker = LoadableVisibility({
  loader: () => import("./EmojiPicker"),
  loading: <p id="loading">Loading</p>
});

const ChatInput = () => {
  const [pickerOpen, togglePicker] = React.useReducer(state => !state, false);

  return (
    <div className="chat-input-container">
      <input type="text" placeholder="Type a message..." />
      <Emoji onClick={togglePicker} />
      {pickerOpen && <EmojiPicker />}
      <Send />
    </div>
  );
};

console.log("ChatInput loading", Date.now());

ユーザーがボタンをクリックした後、EmojiPickerが画面に表示されるたびに、react-loadable-visibility は EmojiPickerコンポーネント が画面上に表示されていることを検出します。
このときに、ユーザが loadingコンポーネント の描画を確認しながら、ファイルの読み込みを始めます。

この fallbackコンポーネント ^[1]は、アプリケーションがフリーズしていないことをユーザーに知らせるためのもので、ファイルを読み込み、解析され、コンパイルされ、実行されるまでしばらく待つ必要があるだけになります。

この記事はこちらを参考に執筆させていただいています。

脚注

1. 正常に機能しなくなったときに、コンポーネントを切り替えるなどして、限定的ながら使用可能な状態を維持するために必要なもの。