始めに

Vue.jsも3系からSuspenseが実装されましたが、今一な点がいくつかありました。

• コンポーネントとして作らないといけない
• ページングなど、複数回ローディングすることはできなそう

参考
Vue.js 3.0 の新機能を試す。 〜 Suspense 編〜

そこで自分がやりたいことを満たすようなコンポーネントを自作してみたので、それの備忘録として記事に残します。

自作コンポーネント（SuspensePromise）の機能

Promiseを渡して状態を監視する

以下のようにPromiseをコンポーネントに渡し、状態に応じて表示内容を切り替えられるようにしています。promiseを渡すだけなので、新しくしたらまたローディングの表示ができるようになります。状態の切り替えの際にresolve, rejectで送ったデータも受け取って表示させることができます。

<template lang="pug">
div
  SuspensePromise(
    :promise="$data.promise"
    :waitTime="100"
  )
    template(#pending)
      p pending...
    template(#resolved="{ data }")
      p resolved, {{ data }}
    template(#rejected="{ data }")
      p rejected, {{ data }}
</template>

実行イメージは以下のような感じです。

pending状態の表示待ち時間を指定できる

こういうローディング系で一番気にしているのが「一瞬ローディングが出てくる」ことです。resolveされるタイミングが早い場合はこういうローディングを出さずにしたいと思って調整しようと思うと、結構大変だと思います。

それをこのコンポーネントでは解消してくれて、waitTimeにpending状態を表示するまでの待ち時間を指定できます。この時間がくる前にresolveされれば、pendingを表示させずにすぐ結果を出すことができます。

終わりに

以上が自作した機能の紹介でした。詳細の実装はCodePenに書いていますので、興味がある方は是非みてください。

See the Pen Suspenseの自作（SuspensePromise） by wintyo (@wintyo) on CodePen.