Loading Patterns

รวม loading patterns ที่ใช้บ่อย — LoadingScreen reusable component พร้อม variant ต่างๆ สำหรับใช้ใน loading.tsx

LoadingScreen — Reusable Component

Full-page overlay + backdrop blur + spinner — import ไปใช้ใน loading.tsx ได้เลย

ตัวอย่างการใช้ใน loading.tsx — ดู code ด้านล่าง

3 spinner styles — Lucide animate-spin, SVG circle spinner, Tailwind border spinner

Lucide

SVG Circle

Border

shadcn Skeleton — card layout (avatar + lines) และ list rows พร้อม toggle show/hide

Bouncing dots, pulse dots, wave dots — ใช้ animate-bounce + staggered animation-delay

Bounce

Pulse

Wave

motion.div — wave (dots oscillate Y with stagger)

Wave