Skeleton Screen💀 พริบตาที่ไม่ควรมองข้าม
Google แนะนำว่า เว็บไซต์ควรโหลดเสร็จภายใน 3 วินาที เพราะ มีโอกาสที่ผู้ใช้ จะขี้เกียจรอแล้วปิดสูง
แต่เว็บที่เราทำมันดันโหลดข้อมูลจาก Database ช้านี่หว่า ทำยังไงดีละ ?
ถ้าพูดเรื่องทำยังไงให้ Server ส่งข้อมูลมาเร็วๆก็ยากอยู่ แถมไม่รู้จะแนะนำอะไรด้วย
เลยจะพูดในส่วนของ Client เท่านั้น และไม่พูดส่วน Optimize Performance ด้วย และวิธีช่วยให้ผู้ใช้ยังรอกว่าจะโหลดเสร็จนั่นก็คือ…
Loading screen
หลายคนคงนึกถึง Spin (วงกลมหมุนติ้วๆ) หรือ progress bar (หลอดพลัง) ในตอนเข้าเว็บหรือแอพ แต่จริงๆ ยังมีอีกรูปแบบหนึ่ง คือ Skeleton Screen ที่ทุกคนเคยเห็นผ่านเว็บดังๆนั่นแหละ
Skeleton Screen คืออะไร ?
Skeleton Screen คือ หน้าที่แสดงโครงสร้างแทนที่ Content ก่อนที่จะโหลด Content เสร็จ และเปลี่ยนเป็น Content เมื่อโหลด Content เสร็จ
ควรใช้ตอนไหน ?
- เว็บใช้ข้อมูล Server หรือ Database
- เว็บมีรูปแบบ Content ที่ขนาด Font ชัดเจน มีการกำหนดกรอบรูปภาพคงที่
ดูเหมือนง่าย แต่ก็มีหลักการอยู่
- ทำSkeleton กับข้อมูลที่ต้องโหลดก็พอ เช่น Button
GO TO PAGE
ซึ่งจะเป็นคำนี้ตลอด สิ่งที่เปลี่ยนคือ path ข้างใน วิธีนี้ใช้ Button เดิม ที่ disabled แทนจะเวิร์คกว่า - ขนาดของ Skeleton จะเท่ากับ ขนาดของ Content ซึ่งหลักการนี้ยังมีจุดยากอยู่คือ ความยาวของประโยค หากเท่ากันตลอดก็กำหนดง่าย แต่ถ้าเป็น ประโยคอย่าง แคปชั่น ใน Facebook และไม่รู้ว่าจะมีกี่บรรทัด ในกรณีนี้วิธีรับมือคือ คาดเดาว่าประโยคส่วนใหญ่ยาวเท่าใด
Let Code with React!
เขียนไปอาจจะยังไม่เข้าใจ มาลองโค้ดกันเลยดีกว่า โดยโปรเจคนี้จะใช้ React , Styled-components และ React loading skeleton (ตัวนี้ใช้ง่ายสุด )
npx create-react-app poc-loading-screen
cd poc-loading-screen
yarn add styled-components
yarn add react-loading-skeleton
yarn start
โดยโครงสร้างแหละหน้าที่เราจะจัดตามนี้
src/- App.jsx // กำหนด state loading และfetch ข้อมูล
-component/
|-contentCard.jsx // components card รับ props loadingจาก App
|-skeleton.jsx // skeleton content
-images/ // ไว้เก็บรูปภาพ
App.jsx
เราจะใช้ useState
เก็บ สถานะ loading (loading== true
คือโหลดอยู่)
และ ใช้ useEffect
ใน fetchข้อมูล แต่เราจะ setTimeout
ตั้งเวลาเอา
contentCard.jsx
Component ผมจะใช้ props loading สลับโหมด ระหว่าง skeleton กับโชว์ content
skeleton.jsx
หน้านี้เราจะลอก CSS ตาม ขนาดรูป หรือ content มาอีกที
เสร็จก็ได้หน้าตาประมาณนี้
ลองเอาไปเปรียบเทียบกับ Loading screen อื่นๆ
live Demo
หรืออยากลอง Clone แงะโค้ดดูได้ตามนี้เลยครับ