Skeleton Screen💀 พริบตาที่ไม่ควรมองข้าม

Google แนะนำว่า เว็บไซต์ควรโหลดเสร็จภายใน 3 วินาที เพราะ มีโอกาสที่ผู้ใช้ จะขี้เกียจรอแล้วปิดสูง

แต่เว็บที่เราทำมันดันโหลดข้อมูลจาก Database ช้านี่หว่า ทำยังไงดีละ ?

ถ้าพูดเรื่องทำยังไงให้ Server ส่งข้อมูลมาเร็วๆก็ยากอยู่ แถมไม่รู้จะแนะนำอะไรด้วย
เลยจะพูดในส่วนของ Client เท่านั้น และไม่พูดส่วน Optimize Performance ด้วย และวิธีช่วยให้ผู้ใช้ยังรอกว่าจะโหลดเสร็จนั่นก็คือ…

Loading screen

loading screen

หลายคนคงนึกถึง Spin (วงกลมหมุนติ้วๆ) หรือ progress bar (หลอดพลัง) ในตอนเข้าเว็บหรือแอพ แต่จริงๆ ยังมีอีกรูปแบบหนึ่ง คือ Skeleton Screen ที่ทุกคนเคยเห็นผ่านเว็บดังๆนั่นแหละ

Skeleton Screen

Skeleton Screen คืออะไร ?

Skeleton Screen คือ หน้าที่แสดงโครงสร้างแทนที่ Content ก่อนที่จะโหลด Content เสร็จ และเปลี่ยนเป็น Content เมื่อโหลด Content เสร็จ

ควรใช้ตอนไหน ?

1. เว็บใช้ข้อมูล Server หรือ Database
2. เว็บมีรูปแบบ Content ที่ขนาด Font ชัดเจน มีการกำหนดกรอบรูปภาพคงที่

ดูเหมือนง่าย แต่ก็มีหลักการอยู่

1. ทำSkeleton กับข้อมูลที่ต้องโหลดก็พอ เช่น Button GO TO PAGE ซึ่งจะเป็นคำนี้ตลอด สิ่งที่เปลี่ยนคือ path ข้างใน วิธีนี้ใช้ Button เดิม ที่ disabled แทนจะเวิร์คกว่า
2. ขนาดของ Skeleton จะเท่ากับ ขนาดของ Content ซึ่งหลักการนี้ยังมีจุดยากอยู่คือ ความยาวของประโยค หากเท่ากันตลอดก็กำหนดง่าย แต่ถ้าเป็น ประโยคอย่าง แคปชั่น ใน Facebook และไม่รู้ว่าจะมีกี่บรรทัด ในกรณีนี้วิธีรับมือคือ คาดเดาว่าประโยคส่วนใหญ่ยาวเท่าใด

Let Code with React!

UI Desgin

เขียนไปอาจจะยังไม่เข้าใจ มาลองโค้ดกันเลยดีกว่า โดยโปรเจคนี้จะใช้ 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 มาอีกที

เสร็จก็ได้หน้าตาประมาณนี้

skeleton screen

ลองเอาไปเปรียบเทียบกับ Loading screen อื่นๆ

no loading, spinner, progress bar, skeleton

live Demo

หรืออยากลอง Clone แงะโค้ดดูได้ตามนี้เลยครับ

jakapatb/poc-loading-screen