loading.tsx 1.0 KB

12345678910111213141516171819202122232425262728293031
  1. // /stock/[code] 진입/네비게이션 시 즉시 노출되는 Suspense 스켈레톤 — 서버 렌더 대기 중 "멈춤" 체감 제거.
  2. export default function Loading()
  3. {
  4. return (
  5. <div className='w-full p-4 space-y-4 animate-pulse' aria-hidden='true'>
  6. <div className='space-y-3'>
  7. <div className='h-8 w-48 rounded bg-gray-500/15' />
  8. <div className='h-10 w-40 rounded bg-gray-500/10' />
  9. <div className='flex gap-4'>
  10. <div className='h-6 w-20 rounded bg-gray-500/10' />
  11. <div className='h-6 w-20 rounded bg-gray-500/10' />
  12. <div className='h-6 w-20 rounded bg-gray-500/10' />
  13. </div>
  14. </div>
  15. <div className='h-40 w-full rounded bg-gray-500/10' />
  16. <div className='flex gap-2'>
  17. {Array.from({ length: 7 }).map((_, i) => (
  18. <div key={i} className='h-8 w-14 rounded bg-gray-500/10' />
  19. ))}
  20. </div>
  21. <div className='space-y-2'>
  22. {Array.from({ length: 10 }).map((_, i) => (
  23. <div key={i} className='h-8 w-full rounded bg-gray-500/10' />
  24. ))}
  25. </div>
  26. </div>
  27. );
  28. }