trela icon indicating copy to clipboard operation
trela copied to clipboard

[Add Feature] : <TrelaSuspence />を作成する

Open uttk opened this issue 5 years ago • 0 comments

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

  /* ... */
}

/* ... */

uttk avatar Oct 07 '20 06:10 uttk