Skip to content

feat(dashboard): add AIInsights loading skeleton #587

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
JhaSourav07 merged 5 commits into from
May 28, 2026
+39 −5
Merged

feat(dashboard): add AIInsights loading skeleton #587

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
b550992
feat(dashboard): add AIInsights loading skeleton
shambavi2007 May 27, 2026
a6efaf3
style(dashboard): improve dark skeleton loading UI
shambavi2007 May 28, 2026
e4b60a8
Merge branch 'main' into feat/aiinsights-skeleton
shambavi2007 May 28, 2026
fb515c2
fix(dashboard): restore AIInsights component
shambavi2007 May 28, 2026
3931105
style(dashboard): format AI insights components
shambavi2007 May 28, 2026
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
7 changes: 4 additions & 3 deletions app/(root)/dashboard/loading.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
import StatsCardSkeleton from '@/components/dashboard/StatsCardSkeleton';
import AchievementsSkeleton from '@/components/dashboard/AchievementsSkeleton';
import AIInsightsSkeleton from '@/components/dashboard/AIInsightsSkeleton';

export default function DashboardLoading() {
return (
<div className="p-4 md:p-6 lg:p-8 min-h-screen">
<div className="p-4 md:p-6 lg:p-8 min-h-screen bg-black text-white">
<div className="grid grid-cols-1 lg:grid-cols-[300px_1fr_320px] gap-6 lg:gap-8">
{/* Left Sidebar Skeleton */}
<div className="flex flex-col gap-6">
Expand Down Expand Up @@ -36,11 +37,11 @@ export default function DashboardLoading() {
</div>

{/* Right Sidebar Skeleton */}
<div className="flex flex-col gap-4">
<div className="flex flex-col gap-6">
<div className="h-24 rounded-2xl shimmer border border-white/10" />
<div className="h-24 rounded-2xl shimmer border border-white/10" />
<div className="h-24 rounded-2xl shimmer border border-white/10" />
<div className="h-48 rounded-2xl shimmer border border-white/10" />
<AIInsightsSkeleton />
</div>
</div>
</div>
Expand Down
1 change: 1 addition & 0 deletions app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,7 @@ html {
}

.shimmer {
background-color: #1a1a1a; /* base dark gray */
background: linear-gradient(
90deg,
rgba(255, 255, 255, 0) 0%,
Expand Down
6 changes: 4 additions & 2 deletions components/dashboard/AIInsights.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,9 +22,10 @@ export default function AIInsights({ insights }: { insights: AIInsight[] }) {
</h3>
</div>

<div className="flex flex-col gap-2">
<div className="flex flex-col gap-6">
{insights.map((insight, i) => {
const Icon = iconMap[insight.icon] || Sparkles;

return (
<motion.div
key={insight.id}
Expand All @@ -38,7 +39,8 @@ export default function AIInsights({ insights }: { insights: AIInsight[] }) {
size={14}
className="text-[#A1A1AA] mt-0.5 shrink-0 group-hover:text-white transition-colors duration-200"
/>
<p className="text-xs xs:text-sm text-[#A1A1AA] leading-relaxed group-hover:text-white/80 transition-colors duration-200">

<p className="text-xs xs:text-sm text-[#A1A1AA] leading-relaxed group-hover:text-white/80 transition-colors duration-200">
{insight.text}
</p>
</motion.div>
Expand Down
30 changes: 30 additions & 0 deletions components/dashboard/AIInsightsSkeleton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
export default function AIInsightsSkeleton() {
return (
<div className="p-6 rounded-xl bg-[#0a0a0a] border border-[rgba(255,255,255,0.08)]">
{/* Header */}
<div className="flex items-center gap-2.5 mb-5">
<div className="w-4 h-4 shimmer rounded-full opacity-80" />
<div className="w-24 h-4 shimmer rounded opacity-80" />
</div>

{/* Insight Rows */}
<div className="flex flex-col gap-6">
{[...Array(3)].map((_, i) => (
<div
key={i}
className="flex items-start gap-3 p-3 rounded-lg bg-[#111] border border-[rgba(255,255,255,0.05)]"
>
{/* Icon */}
<div className="w-4 h-4 shimmer rounded-full mt-1 shrink-0 opacity-80" />

{/* Text */}
<div className="flex-1 space-y-2">
<div className="h-3 shimmer rounded w-full opacity-80" />
<div className="h-3 shimmer rounded w-4/5 opacity-60" />
</div>
</div>
))}
</div>
</div>
);
}
Loading