背景
Material-UI (v1.0.0-beta.11)を使っていて、SPAでよくあるPOSTしたタイミングでスピナーを回すUIを作成したのだが、どうやら、 CircularProgress コンポーネントがメモリリークしてしまっているようで、iPhoneのsafariで画面が固まる現象に遭遇した。
[CircularProgress] Only works with Chrome · Issue #5524 · callemall/material-ui
もちろん、beta版を使用していて、バグが含まれることも承知の上なので、スピナーのUIをMaterial UIにこだわる必要もない、かつ、致命的なバグなので、スピナーのUIはFont AwesomeのSpinnerアイコンを回転させることで対応することにした。
そこで、React環境にFont Awesomeを導入するためのパッケージをいくつか比較した。いかにコストをかけずに、スピナーを回せるかという視点で導入を判断した。
react-font-awesome: ★400+
danawoodman/react-fontawesome: A React Font Awesome component.
結局これを導入した。
font-awesome.min.css ファイルを別途読み込ませれば、下記のI/Fでアイコンを使える。spinプロパティが用意されていて、このプロパティを付与すれば、アイコンが回転する。
<FontAwesome
name='spinner'
size='2x'
spin
/>
react-fa: ★400+
andreypopp/react-fa: Font Awesome icons as React components
こちらは、webpack.configにloaderを足して、アイコンを読み込む。別プロジェクトで導入していたことがあったが、今回はなるべくwebpack.configを触りたくなかったので、導入を見送った。
こちらもspinプロパティが用意されている。
react-icons: ★1200+
gorangajic/react-icons: svg react icons of popular icon packs
Font awesomeの他に、Material、Typiconsも使えるが、正直、Font Awesomeだけで十分なので、YAGNI原則に従って、見送った。
あと、spinプロパティが実装されておらず、自分でcssで回してね、とのことだったので、そこも見送った要因となった。
Spinning icons · Issue #52 · gorangajic/react-icons
その他
Material UIのバグはissueに挙がっていたので、そのうち対応されるかと思う。Material UIのIconsも少し使い勝手が悪いので、一緒にreact-fontawesomeに乗り換えたい所感を抱いている。