Skip to content

feat: Add loading skeleton state for the Repository Dashboard #35

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
SHAURYASANYAL3 merged 1 commit into from
Jul 14, 2026
Merged

feat: Add loading skeleton state for the Repository Dashboard #35

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 41 additions & 0 deletions apps/web/src/app/dashboard/loading.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
export default function DashboardLoading() {
return (
<div className="space-y-10">
{/* Metrics Section Skeleton */}
<section>
<h2 className="text-xl font-semibold text-gray-900 mb-4">Engineering Overview</h2>
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
{Array.from({ length: 4 }).map((_, i) => (
<div key={i} className="bg-white p-6 rounded-xl border border-gray-200 shadow-sm">
<div className="h-4 w-28 bg-gray-200 rounded animate-pulse mb-3" />
<div className="h-9 w-16 bg-gray-200 rounded animate-pulse" />
</div>
))}
</div>
</section>

{/* Repositories Section Skeleton */}
<section>
<div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-4">
<h2 className="text-xl font-semibold text-gray-900">Your Repositories</h2>
<div className="h-9 w-36 bg-gray-200 rounded-lg animate-pulse" />
</div>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{Array.from({ length: 3 }).map((_, i) => (
<div key={i} className="bg-white p-6 rounded-xl border border-gray-200 shadow-sm flex flex-col justify-between h-full">
<div>
<div className="h-5 w-32 bg-gray-200 rounded animate-pulse" />
<div className="h-4 w-48 bg-gray-100 rounded animate-pulse mt-2" />
</div>
<div className="mt-6 flex justify-between items-center">
<div className="h-5 w-14 bg-gray-100 rounded-full animate-pulse" />
<div className="h-4 w-20 bg-gray-100 rounded animate-pulse" />
</div>
</div>
))}
</div>
</section>
</div>
);
}
99 changes: 99 additions & 0 deletions apps/web/src/app/dashboard/repository/[id]/loading.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,99 @@
export default function RepositoryLoading() {
return (
<div className="space-y-8">
{/* Header Skeleton */}
<div className="bg-white border border-gray-200 rounded-xl p-6 shadow-sm flex flex-col md:flex-row justify-between items-start gap-4">
<div className="flex-1">
<div className="h-7 w-56 bg-gray-200 rounded animate-pulse" />
<div className="flex flex-wrap items-center gap-4 mt-3">
<div className="h-4 w-16 bg-gray-100 rounded animate-pulse" />
<div className="h-4 w-20 bg-gray-100 rounded animate-pulse" />
<div className="h-4 w-14 bg-gray-100 rounded animate-pulse" />
<div className="h-5 w-32 bg-gray-100 rounded animate-pulse" />
</div>
<div className="h-4 w-full max-w-md bg-gray-100 rounded animate-pulse mt-4" />
</div>

{/* Health Score Skeleton */}
<div className="shrink-0 bg-gray-50 border border-gray-200 rounded-lg p-4 w-48 text-center">
<div className="h-3 w-24 bg-gray-200 rounded animate-pulse mx-auto mb-2" />
<div className="h-9 w-12 bg-gray-200 rounded animate-pulse mx-auto" />
<div className="h-3 w-16 bg-gray-100 rounded animate-pulse mx-auto mt-1" />
</div>

{/* Bus Factor Skeleton */}
<div className="shrink-0 bg-red-50/50 border border-gray-200 rounded-lg p-4 w-48 text-center">
<div className="h-3 w-20 bg-gray-200 rounded animate-pulse mx-auto mb-2" />
<div className="h-9 w-8 bg-gray-200 rounded animate-pulse mx-auto" />
<div className="h-3 w-16 bg-gray-100 rounded animate-pulse mx-auto mt-1" />
</div>

{/* Resilience Skeleton */}
<div className="shrink-0 bg-blue-50/50 border border-gray-200 rounded-lg p-4 w-48 text-center">
<div className="h-3 w-20 bg-gray-200 rounded animate-pulse mx-auto mb-2" />
<div className="h-9 w-12 bg-gray-200 rounded animate-pulse mx-auto" />
<div className="h-3 w-20 bg-gray-100 rounded animate-pulse mx-auto mt-1" />
</div>
</div>

{/* Stats Grid Skeleton */}
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
{Array.from({ length: 2 }).map((_, i) => (
<div key={i} className="bg-white border border-gray-200 rounded-xl p-5 shadow-sm">
<div className="h-3 w-24 bg-gray-100 rounded animate-pulse" />
<div className="h-7 w-12 bg-gray-200 rounded animate-pulse mt-2" />
</div>
))}
<div className="bg-white border border-gray-200 rounded-xl p-5 shadow-sm md:col-span-2 flex justify-between items-center">
<div>
<div className="h-3 w-16 bg-gray-100 rounded animate-pulse" />
<div className="h-5 w-24 bg-gray-200 rounded animate-pulse mt-2" />
</div>
<div className="text-right">
<div className="h-3 w-12 bg-gray-100 rounded animate-pulse" />
<div className="h-5 w-16 bg-gray-200 rounded animate-pulse mt-2" />
</div>
</div>
</div>

{/* Evidence Panels Skeleton */}
<div className="bg-white border border-gray-200 rounded-xl p-6 shadow-sm">
<div className="h-5 w-32 bg-gray-200 rounded animate-pulse mb-4" />
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
{Array.from({ length: 4 }).map((_, i) => (
<div key={i}>
<div className="flex justify-between items-center mb-2">
<div className="h-4 w-20 bg-gray-100 rounded animate-pulse" />
<div className="h-4 w-10 bg-gray-100 rounded animate-pulse" />
</div>
<div className="w-full bg-gray-200 rounded-full h-2 mb-3 animate-pulse" />
<div className="space-y-1">
<div className="h-3 w-full bg-gray-100 rounded animate-pulse" />
<div className="h-3 w-4/5 bg-gray-100 rounded animate-pulse" />
<div className="h-3 w-3/5 bg-gray-100 rounded animate-pulse" />
</div>
</div>
))}
</div>
</div>

{/* Timeline Skeleton */}
<div className="bg-white border border-gray-200 rounded-xl shadow-sm overflow-hidden">
<div className="px-6 py-4 border-b border-gray-200">
<div className="h-5 w-28 bg-gray-200 rounded animate-pulse" />
</div>
<ul className="divide-y divide-gray-100">
{Array.from({ length: 5 }).map((_, i) => (
<li key={i} className="px-6 py-4 flex gap-4">
<div className="shrink-0 w-8 h-8 rounded-full bg-gray-100 animate-pulse" />
<div className="min-w-0 flex-1">
<div className="h-4 w-48 bg-gray-100 rounded animate-pulse" />
<div className="h-3 w-32 bg-gray-50 rounded animate-pulse mt-1" />
</div>
</li>
))}
</ul>
</div>
</div>
);
}
Loading