Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
React Nativeで Facebookのようなロード画面を実装する
Search
okimotoren
May 21, 2021
Programming
1
950
React Nativeで Facebookのようなロード画面を実装する
こちらのブログにも記載しています。
https://zenn.dev/okimotoren/articles/9f4f97c90685e9
okimotoren
May 21, 2021
Tweet
Share
More Decks by okimotoren
See All by okimotoren
株式会社BeatFit エンジニア向け採用資料
okimotoren
0
48
Other Decks in Programming
See All in Programming
코틀린으로 멀티플랫폼 만들기
pangmoo
0
150
"config" ってなんだ? / What is "config"?
okashoi
0
240
1BRC--Nerd Sniping the Java Community
gunnarmorling
0
340
単体テストを書かない技術 #phpcon_odawara
o0h
PRO
26
8.2k
雑に思考を整理する技術と効能
konifar
58
29k
スキーマ駆動開発による品質とスピードの両立 - 私達は何故、スキーマを書くのか
kentaroutakeda
0
170
Prepare for Jakarta EE 11 - Performance and Developer Productivity
ivargrimstad
0
740
Snowflakeで眠ったデータを起こそう!
estie
0
120
Scalable Customer Journey Orchestration (CJO)
lewuathe
0
170
Rubyでたのしむクリエイティブコーディング/Enjoy Creative coding with Ruby
chobishiba
1
180
if constexpr文はテンプレート世界のラムダ式である
faithandbrave
3
640
今、知っておきたい! 生成AIエージェントの世界
elith
3
350
Featured
See All Featured
Typedesign – Prime Four
hannesfritz
36
2.1k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
121
39k
Learning to Love Humans: Emotional Interface Design
aarron
267
39k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
7
1k
What the flash - Photography Introduction
edds
64
11k
GraphQLの誤解/rethinking-graphql
sonatard
50
9.2k
Docker and Python
trallard
34
2.7k
Robots, Beer and Maslow
schacon
PRO
155
7.9k
The Pragmatic Product Professional
lauravandoore
25
5.8k
Building Flexible Design Systems
yeseniaperezcruz
319
37k
How to Ace a Technical Interview
jacobian
272
22k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
25
2.3k
Transcript
〜skeleton loadingの導入とライブラリ比較〜 React Nativeで Facebookのようなロード画面を実装する
自己紹介 れん / Ren Okimoto ・株式会社BeatFit ・RNでフロントエンドエンジニアしてます ・新卒1年目 ・関西出身 ・甘党です。
BeatFitについて ・音声フィットネスのアプリ ・リリース3年目 ・創業からReact Nativeを採用 ・backend は Ruby on Rails
・GraphQLへ移行中
新機能:みんなの広場 ・アプリ内のユーザー同士が関われるSNS/掲示板 ・コミュニティ機能の活性により、 データ量が指数関数的に増大し、 パフォーマンスが低下した。
・ローディング時間が長い ・ページのキャッシュが残るため、 一瞬だけ別ページが表示されてしまう パフォーマンス低下による2つの問題
Skeleton Loading 導入事例 Facebook、YouTube、Twitter UberEats、メルカリ、LINEなど。 特徴 シルエットを映すことで 体感の待ち時間を短縮できる
3 つの Skeleton ライブラリ ① react-content-loader (star : 11k、最終更新:6日前) ②
react-native-skeleton-placeholder (star : 280、最終更新:25日前) ③ rn-placeholder(star : 1.8k、最終更新:8ヶ月前)
react-content-loader ・最もStar 数が多く、活発なメンテナンス。 ・FacebookやInstagramのexampleとして設定されている ・こちらを最初に選定したが、問題が浮上。
ViewBox Style で、全体の座標位置を指定。 1. 再利用性が低い 2. Android, IOS のOS 間の差異が大きい
3. コードの可読性が悪い CSS の設定に問題
導入:react-native-skeleton-placeholder ・Viewでstyleの実装が可能
つまずいたこと 最新版の react-native-skeleton-placeholder がビルドに失敗。 → ライブラリの依存関係が原因であった。 同様の issue が立っていてたため、 githubで報告し、社内ではパッチを作って対処した。
1)ホーム画面から「みんなの広場」の投稿一覧 2)投稿一覧画面から、投稿の詳細画面 ※ページのキャッシュ問題を解決するために、 useEffectのクリーンアップ関数でstore のdata を空にする 処理をしています。 2箇所に skeleton
loadingを実装
まとめ ・Skeleton Loading の導入によって UX が改善された。 ・ページのキャッシュ問題が解決できた。 ・ライブラリーは複数存在したが、CSS の実装のしやすさから、
react-native-skeleton-placeholder を選定した。
ご清聴 ありがとうございました