iter 2

app/(protected)/loading.tsx

@@ -0,0 +1,5 @@
+import { StaticLoader } from "@shared/ui/Loader"
+
+export default function ProtectedLoading() {
+	return <StaticLoader block />
+}

app/(protected)/profile/loading.tsx

@@ -0,0 +1,29 @@
+import { Skeleton } from "@shared/ui/Skeleton"
+
+export default function ProfileLoading() {
+	return (
+		<div
+			style={{
+				display: "flex",
+				justifyContent: "center",
+				padding: "32px 16px",
+			}}
+		>
+			<div
+				style={{
+					display: "flex",
+					flexDirection: "column",
+					alignItems: "center",
+					gap: "24px",
+					width: "100%",
+					maxWidth: "640px",
+				}}
+			>
+				<Skeleton width="120px" height="120px" borderRadius="50%" />
+				<Skeleton width="100%" height="200px" borderRadius="10px" />
+				<Skeleton width="100%" height="160px" borderRadius="10px" />
+				<Skeleton width="100%" height="140px" borderRadius="10px" />
+			</div>
+		</div>
+	)
+}

app/(protected)/projects/[project_id]/page.tsx

@@ -1,11 +1,11 @@
 import { JSX } from "react"
 
-import { ProjectWorkspacePage } from "@pages/ProjectWorkspacePage"
+import { ProjectWizardPage } from "@pages/ProjectWizardPage"
 
 export default function Projects(): JSX.Element {
   return (
     <main>
-      <ProjectWorkspacePage />
+      <ProjectWizardPage />
     </main>
   )
 }

app/(protected)/projects/loading.tsx

@@ -0,0 +1,18 @@
+import { ProjectCardSkeleton } from "@shared/ui/Skeleton"
+
+export default function ProjectsLoading() {
+	return (
+		<div
+			style={{
+				padding: "28px 24px 40px",
+				display: "grid",
+				gridTemplateColumns: "repeat(auto-fill, minmax(320px, 1fr))",
+				gap: "20px",
+			}}
+		>
+			{Array.from({ length: 6 }).map((_, i) => (
+				<ProjectCardSkeleton key={i} />
+			))}
+		</div>
+	)
+}