trela
trela copied to clipboard
[Add Feature] : <TrelaSuspence />を作成する
<TrelaSuspence /> は、<React.Suspence />をラップしたコンポーネント。
使い方や、挙動は<React.Suspence />と同じ挙動をするが、それをTrelaに伝える役割を果たす。
サンプルコード
// LazyComponentが投げるPromiseが完了するまで、<Loading />を表示する
const Sample = () => (
<TrelaSuspence fallback={<Loading />}>
<LazyComponent />
</TrelaSuspence>
);
// Trelaを用いて非同期処理を実行しているコンポーネント
const LazyComponent = () => {
const { apis } = useTrela();
// 通常はPromiseを投げないが、<TrelaSuspence />内にある時だけPromiseを投げるようになる
const [result, isLoading] = apis.anyApi().read();
/* ... */
}
/* ... */