loading.tsx 945 B

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