iter 2

src/pages/ProjectsPage/ProjectsPage.tsx

@@ -19,7 +19,7 @@ import {
 import api from "@shared/api"
 import { useDebounce } from "@shared/hooks/useDebounce"
 import { Button } from "@shared/ui"
-import { StaticLoader } from "@shared/ui/Loader"
+import { ProjectCardSkeleton } from "@shared/ui/Skeleton"
 import {
 	ProjectsHeader,
 	type ProjectStatusEnum,
@@ -59,7 +59,6 @@ export const ProjectsPage: FunctionComponent<
 
 	return (
 		<div className={styles.root} data-testid="ProjectsPage">
-			{projectsLoading && <StaticLoader fullscreen />}
 			<div className={styles.header}>
 				<div className={styles.titles}>
 					<h1 className={styles.title}>Мои проекты</h1>
@@ -133,20 +132,24 @@ export const ProjectsPage: FunctionComponent<
 			/>
 
 			<div className={styles.projectList}>
-				{projects?.map((project) => (
-					<ProjectCard
-						key={project.id}
-						project={project}
-						progress={project.status === "PROCESSING" ? 45 : 0}
-						currentAction={
-							project.status === "PROCESSING" ? "Рендеринг" : undefined
-						}
-						onClick={() => router.push(`/projects/${project.id}`)}
-						onEdit={() => setEditProject(project)}
-						onRename={() => setRenameProject(project)}
-						onDelete={() => setDeleteProject(project)}
-					/>
-				))}
+				{projectsLoading
+					? Array.from({ length: 6 }).map((_, i) => (
+							<ProjectCardSkeleton key={i} />
+						))
+					: projects?.map((project) => (
+							<ProjectCard
+								key={project.id}
+								project={project}
+								progress={project.status === "PROCESSING" ? 45 : 0}
+								currentAction={
+									project.status === "PROCESSING" ? "Рендеринг" : undefined
+								}
+								onClick={() => router.push(`/projects/${project.id}`)}
+								onEdit={() => setEditProject(project)}
+								onRename={() => setRenameProject(project)}
+								onDelete={() => setDeleteProject(project)}
+							/>
+						))}
 			</div>
 
 			{!projectsLoading && projects?.length === 0 && (