feat: skeleton loaders for public DevCard pages — shimmer animation, fade transitions & reduced-motion support

[Itzzavdheshh]

🚀 Program

GSSoC

---

📝 Description

Public DevCard pages (/u/[username] and /devcard/[id]) showed empty or delayed content during hydration — no placeholder, no visual feedback. This PR adds polished skeleton loaders that match the real layouts, shimmer while loading, fade out smoothly when content is ready, and respect prefers-reduced-motion.

What was built:

🔧 src/lib/components/SkeletonBlock.svelte — NEW

• Base reusable skeleton block — accepts width, height, rounded props
• CSS shimmer animation via background: linear-gradient + animation: shimmer
• @media (prefers-reduced-motion: reduce) — shimmer disabled, static muted block shown instead

🔧 src/lib/components/ProfileSkeleton.svelte — NEW

• Full skeleton layout for /u/[username] — avatar circle, name line, role line, bio lines, link tiles, footer
• Composed entirely from SkeletonBlock — consistent sizing and spacing matches real profile layout
• Responsive — matches real card breakpoints

🔧 src/lib/components/DevCardSkeleton.svelte — NEW

• Full skeleton layout for /devcard/[id] — premium card block, connections section blocks
• Matches real DevCard dimensions and grid layout
• Responsive — no layout shift when real content swaps in

🔧 src/routes/u/[username]/+page.svelte — MODIFIED

• onMount sets hydrated = true after client hydration completes
• ProfileSkeleton rendered as overlay until hydrated — server-rendered immediately, visible from first paint
• Skeleton fades out (opacity: 0, pointer-events: none) on hydration
• Real content fades in (opacity: 1) with transition: opacity 300ms ease
• Reactive page data handling added
• prefers-reduced-motion — transitions skipped, instant swap

🔧 src/routes/devcard/[id]/+page.svelte — MODIFIED

• Same onMount + hydrated pattern as profile page
• DevCardSkeleton shown until hydration completes
• Smooth fade-out / fade-in transition
• Safer external link opening added (rel="noopener noreferrer")
• prefers-reduced-motion respected

---

🔗 Related Issue

Closes #278

---

🔄 Type of Change

• 🐛 Bug fix
• ✨ New feature
• 🔍 SEO improvement
• 🎨 Style / UI improvement
• ♿ Accessibility improvement — reduced-motion support
• 📝 Documentation
• ⚙️ CI / configuration
• 🧹 Refactor / cleanup

---

🧪 How to Test

pnpm --filter @devcard/web check   # 0 errors, 0 warnings
pnpm --filter @devcard/web build   # successful
pnpm --filter @devcard/web dev     # open http://localhost:5173

1. Open /u/[username] → verify skeleton appears immediately on load before content
2. Open /devcard/[id] → verify DevCard skeleton appears during hydration
3. Wait for hydration → verify skeleton fades out, real content fades in smoothly
4. Verify no layout shift between skeleton and real content
5. Throttle network (DevTools → Slow 3G) → verify skeleton remains stable during long load
6. Enable prefers-reduced-motion in OS/browser → verify instant swap, no animation
7. Resize to mobile → verify skeleton matches real layout at all breakpoints
8. Run pnpm --filter @devcard/web check → verify 0 errors, 0 warnings

---

📸 Screenshots

1. /u/[username] — ProfileSkeleton during hydration

2. /u/[username] — real content after fade-in

3. /devcard/[id] — DevCardSkeleton during hydration

4. /devcard/[id] — real content after fade-in

6. pnpm check — 0 errors, 0 warnings

7. pnpm build — successful

---

✅ Checklist

• I am contributing under GSSoC
• My code follows the project's existing style
• I have tested my changes in a browser
• I have linked the related issue above
• My PR title follows Conventional Commits format
• Skeletons appear during loading on both public routes
• Layout shifting minimized — skeleton dimensions match real content layout
• Shimmer animation active during loading
• Smooth 300ms fade-out / fade-in transitions implemented
• prefers-reduced-motion respected — instant swap, no animation
• Responsive — skeleton matches real card at all breakpoints
• pnpm --filter @devcard/web check — 0 errors, 0 warnings
• pnpm --filter @devcard/web build — successful
• 3 new components, 2 modified pages — zero regressions

---

🙌 Contribution Note

Hi @ShantKhatri & @Harxhit 👋

This PR delivers the complete skeleton loader system for public DevCard pages as described in the issue — every acceptance criterion met.

• ✅ Skeletons appear during loading — server-rendered immediately, visible from first paint via onMount + hydrated pattern
• ✅ Layout shifting minimized — ProfileSkeleton and DevCardSkeleton match real layout dimensions exactly
• ✅ Shimmer animation — CSS gradient shimmer on SkeletonBlock; composable across both layouts
• ✅ Smooth transitions — 300ms ease fade-out on skeleton, fade-in on real content
• ✅ Accessibility — prefers-reduced-motion skips all animation; instant swap
• ✅ 3 new components, 2 pages modified — reusable, zero regressions
• ✅ svelte-check + build both pass clean

Happy to address any feedback! 🚀

---

Submitted as part of Open Source Contribution — GSSoC (GirlScript Summer of Code)

[Itzzavdheshh]

Hi @ShantKhatri & @Harxhit 👋

This PR delivers the complete skeleton loader system for public DevCard pages as described in the issue — every acceptance criterion met.

• ✅ Skeletons appear during loading — server-rendered immediately, visible from first paint via onMount + hydrated pattern
• ✅ Layout shifting minimized — ProfileSkeleton and DevCardSkeleton match real layout dimensions exactly
• ✅ Shimmer animation — CSS gradient shimmer on SkeletonBlock; composable across both layouts
• ✅ Smooth transitions — 300ms ease fade-out on skeleton, fade-in on real content
• ✅ Accessibility — prefers-reduced-motion skips all animation; instant swap
• ✅ 3 new components, 2 pages modified — reusable, zero regressions
• ✅ svelte-check + build both pass clean

Happy to address any feedback! 🚀