Load When Visible

Inertia は、Intersection Observer API を使用して、スクロール時のデータの遅延読み込みをサポートしています。WhenVisible コンポーネントは、要素がビューポート内に表示されたときにデータを読み込むための便利な方法を提供します。

WhenVisible コンポーネントは、読み込む prop のキーを指定する data prop を受け取ります。また、データの読み込み中に表示するコンポーネントを指定する fallback prop も受け取ります。WhenVisible コンポーネントは、データに依存するコンポーネントをラップする必要があります。

要素が表示されたときに複数の prop を読み込みたい場合は、data prop に配列を渡すことができます。

表示前に読み込む

要素が表示される前にデータの読み込みを開始したい場合は、buffer prop に値を指定できます。buffer の値は、要素が表示される何ピクセル前から読み込みを開始するかを表す数値です。

上記の例では、要素が表示される 500 ピクセル前からデータの読み込みが開始されます。

デフォルトでは、WhenVisible コンポーネントは、要素がビューポート内に表示されていることを確認するために、fallback テンプレートを div 要素でラップします。ラッパー要素をカスタマイズしたい場合は、as prop を指定できます。

常にトリガーする

デフォルトでは、WhenVisible コンポーネントは、要素が表示されたときに一度だけトリガーされます。要素が表示されるたびに常にデータ読み込みをトリガーしたい場合は、always prop を指定できます。

これは、無限スクロールリストの末尾にある要素が表示されるたびに追加のデータを読み込みたい場合などに便利です。あるいは、このユースケースを処理する Infinite scroll コンポーネントを使用することもできます。

なお、データ読み込みリクエストがすでに進行中の場合、要素がビューポート内に表示されたままであれば、現在のリクエストが完了するまで次のリクエストは開始されません。

フェッチ状態

WhenVisible コンポーネントは、後続のリクエスト中にローディングインジケーターを表示するために使用できる fetching スロットプロパティを公開しています。fallback は初回読み込み時にのみ表示される一方で、fetching はその後の再読み込み時にデータが更新されていることを示すために使用できるため、これは便利です。

フォーム送信

フォームを送信する際、WhenVisible コンポーネントで使用されている prop を除外するために except オプションを使用したい場合があります。これにより、バリデーションエラーによって現在のページにリダイレクトされた際に、これらの prop が再読み込みされるのを防ぐことができます。