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.2k
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
60
Other Decks in Programming
See All in Programming
Google Opalで使える37のライブラリ
mickey_kubo
3
130
CSC509 Lecture 08
javiergs
PRO
0
230
CSC305 Lecture 10
javiergs
PRO
0
220
テーブル定義書の構造化抽出して、生成AIでDWH分析を試してみた / devio2025tokyo
kasacchiful
0
260
XP, Testing and ninja testing ZOZ5
m_seki
3
790
3年ぶりにコードを書いた元CTOが Claude Codeと30分でMVPを作った話
maikokojima
0
620
Developer Joy - The New Paradigm
hollycummins
1
340
Writing Better Go: Lessons from 10 Code Reviews
konradreiche
3
5.7k
iOSでSVG画像を扱う
kishikawakatsumi
0
150
Domain-centric? Why Hexagonal, Onion, and Clean Architecture Are Answers to the Wrong Question
olivergierke
3
940
Vueのバリデーション、結局どれを選べばいい? ― 自作バリデーションの限界と、脱却までの道のり ― / Which Vue Validation Library Should We Really Use? The Limits of Self-Made Validation and How I Finally Moved On
neginasu
2
180
EMこそClaude Codeでコード調査しよう
shibayu36
0
320
Featured
See All Featured
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
Why Our Code Smells
bkeepers
PRO
340
57k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
36
6.1k
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Building a Scalable Design System with Sketch
lauravandoore
463
33k
YesSQL, Process and Tooling at Scale
rocio
173
15k
Typedesign – Prime Four
hannesfritz
42
2.8k
Building an army of robots
kneath
306
46k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
9
920
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
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 を選定した。
ご清聴 ありがとうございました