Feat: Добавить пример loading компонента для tasks (#66)

apps/web/app/(dashboard)/tasks/loading.tsx

@@ -0,0 +1,66 @@
+import { Skeleton } from '@repo/ui'
+
+export default function Loading() {
+	return (
+		<div className='bg-background text-foreground w-full h-full'>
+			<div className='mx-auto flex w-full max-w-[2100px] flex-col gap-8 px-5 py-8 md:px-8'>
+				<header className='flex flex-col gap-4 md:flex-row md:items-center md:justify-between'>
+					<h1 className='text-3xl font-semibold tracking-tight'>Задачи</h1>
+					<Skeleton className='h-10 w-36 rounded-lg' />
+				</header>
+
+				<section className='grid grid-cols-1 gap-4 xl:grid-cols-[2.2fr_0.75fr_0.8fr_0.85fr]'>
+					<Skeleton className='h-10 rounded-lg' />
+					<Skeleton className='h-10 rounded-lg' />
+					<Skeleton className='h-10 rounded-lg' />
+					<Skeleton className='h-10 rounded-lg' />
+				</section>
+
+				<div className='overflow-x-auto rounded-3xl border border-border bg-card'>
+					<table className='min-w-full border-collapse'>
+						<thead className='border-b border-border'>
+							<tr className='text-left text-base text-muted-foreground'>
+								<th className='w-12 px-4 py-4'>
+									<Skeleton className='h-5 w-5 rounded-md' />
+								</th>
+								<th className='min-w-28 px-3 py-4 font-semibold'>Ключ</th>
+								<th className='min-w-[360px] px-3 py-4 font-semibold'>Название</th>
+								<th className='min-w-28 px-3 py-4 font-semibold'>Тип</th>
+								<th className='min-w-36 px-3 py-4 font-semibold'>Статус</th>
+								<th className='min-w-24 px-3 py-4 font-semibold'>Приор.</th>
+								<th className='min-w-36 px-3 py-4 font-semibold'>Исполнитель</th>
+							</tr>
+						</thead>
+						<tbody>
+							{Array.from({ length: 4 }).map((_, index) => (
+								<tr key={index} className='border-b border-border last:border-b-0'>
+									<td className='px-4 py-4'>
+										<Skeleton className='h-5 w-5 rounded-md' />
+									</td>
+									<td className='px-3 py-4'>
+										<Skeleton className='h-4 w-14' />
+									</td>
+									<td className='px-3 py-4'>
+										<Skeleton className='h-4 w-64 max-w-full' />
+									</td>
+									<td className='px-3 py-4'>
+										<Skeleton className='h-4 w-24' />
+									</td>
+									<td className='px-3 py-4'>
+										<Skeleton className='h-4 w-28' />
+									</td>
+									<td className='px-3 py-4'>
+										<Skeleton className='h-4 w-20' />
+									</td>
+									<td className='px-3 py-4'>
+										<Skeleton className='h-4 w-24' />
+									</td>
+								</tr>
+							))}
+						</tbody>
+					</table>
+				</div>
+			</div>
+		</div>
+	)
+}

apps/web/app/(dashboard)/tasks/page.tsx

@@ -3,41 +3,41 @@ import { notFound } from 'next/navigation'
 
 import { Button } from '@repo/ui'
 
-const tasks = [
+const mockTasks = [
 	{
-		key: 'TT-1',
+		id: 'TT-1',
 		title: 'Реализовать систему авторизации',
 		type: 'Эпик',
 		status: 'В работе',
 		priority: 'Высокий',
 		assignee: 'Алексей',
 	},
 	{
-		key: 'TT-2',
+		id: 'TT-2',
 		title: 'Kanban доска с drag & drop',
 		type: 'Стори',
 		status: 'В работе',
 		priority: 'Высокий',
 		assignee: 'Мария',
 	},
 	{
-		key: 'TT-3',
+		id: 'TT-3',
 		title: 'Фильтры и поиск задач',
 		type: 'Стори',
 		status: 'К выполнению',
 		priority: 'Средний',
 		assignee: 'Дмитрий',
 	},
 	{
-		key: 'TT-4',
+		id: 'TT-4',
 		title: 'Исправить баг с отображением аватаров',
 		type: 'Баг',
 		status: 'Ревью',
 		priority: 'Высокий',
 		assignee: 'Елена',
 	},
 	{
-		key: 'TT-5',
+		id: 'TT-5',
 		title: 'Настроить CI/CD pipeline',
 		type: 'Тех. долг',
 		status: 'Готово',
@@ -46,18 +46,22 @@ const tasks = [
 	},
 ] as const
 
-const typeBadgeClassName: Record<(typeof tasks)[number]['type'], string> = {
+const typeBadgeClassName: Record<(typeof mockTasks)[number]['type'], string> = {
 	Эпик: 'bg-violet-500/20 text-violet-300',
 	Стори: 'bg-blue-500/20 text-blue-300',
 	Баг: 'bg-red-500/20 text-red-300',
 	'Тех. долг': 'bg-amber-500/20 text-amber-300',
 }
 
-export default function TasksPage() {
+const sleep = (ms: number) => new Promise((r) => setTimeout(r, ms))
+
+export default async function TasksPage() {
 	if (!FEATURES.TASKS) {
 		notFound()
 	}
 
+	await sleep(1000)
+
 	return (
 		<div className='bg-background text-foreground w-full h-full'>
 			<div className='mx-auto flex w-full max-w-[2100px] flex-col gap-8 px-5 py-8 md:px-8'>
@@ -101,12 +105,12 @@ export default function TasksPage() {
 							</tr>
 						</thead>
 						<tbody>
-							{tasks.map((task) => (
-								<tr key={task.key} className='border-b border-border last:border-b-0'>
+							{mockTasks?.map((task) => (
+								<tr key={task.id} className='border-b border-border last:border-b-0'>
 									<td className='px-4 py-3'>
 										<span className='block h-5 w-5 rounded-md border-2 border-primary' />
 									</td>
-									<td className='px-3 py-3 text-xl text-muted-foreground'>{task.key}</td>
+									<td className='px-3 py-3 text-xl text-muted-foreground'>{task.id}</td>
 									<td className='px-3 py-3 text-xl font-medium text-foreground'>
 										{task.title}
 									</td>

packages/ui/src/components/index.ts

@@ -13,6 +13,7 @@ export * from './separator'
 export * from './sheet'
 export * from './textarea'
 export * from './tooltip'
+export * from './skeleton'
 
 export * from './layout/stack'
 export * from './layout/container'

packages/ui/src/components/skeleton.tsx

@@ -0,0 +1,13 @@
+import { cn } from '@repo/ui/lib/utils'
+
+function Skeleton({ className, ...props }: React.ComponentProps<'div'>) {
+	return (
+		<div
+			data-slot='skeleton'
+			className={cn('animate-pulse rounded-md bg-accent', className)}
+			{...props}
+		/>
+	)
+}
+
+export { Skeleton }