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
1.1k
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
59
Other Decks in Programming
See All in Programming
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
1
500
ニーリーにおけるプロダクトエンジニア
nealle
0
600
ふつうの技術スタックでアート作品を作ってみる
akira888
0
180
すべてのコンテキストを、 ユーザー価値に変える
applism118
2
940
エンジニア向け採用ピッチ資料
inusan
0
170
「Cursor/Devin全社導入の理想と現実」のその後
saitoryc
0
390
都市をデータで見るってこういうこと PLATEAU属性情報入門
nokonoko1203
1
580
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
440
LINEヤフー データグループ紹介
lycorp_recruit_jp
0
1.2k
XSLTで作るBrainfuck処理系
makki_d
0
210
WindowInsetsだってテストしたい
ryunen344
1
200
C++20 射影変換
faithandbrave
0
540
Featured
See All Featured
How to Think Like a Performance Engineer
csswizardry
24
1.7k
What's in a price? How to price your products and services
michaelherold
246
12k
Code Review Best Practice
trishagee
68
18k
How STYLIGHT went responsive
nonsquared
100
5.6k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Automating Front-end Workflow
addyosmani
1370
200k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.8k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
Designing for Performance
lara
609
69k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
710
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
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 を選定した。
ご清聴 ありがとうございました