refactor(dashboard): add loading skeleton for Achievements component (JhaSourav07#470)

## Description

Fixes JhaSourav07#368
Implements `AchievementsSkeleton` and integrates it into the dashboard
loading sequence.
Replaces the generic tall sidebar block with a split layout featuring a
ProfileCard placeholder and a 2x2 achievement grid.
Standardizes the loading UI by utilizing the existing `shimmer`
animation and refactoring arbitrary heights to canonical Tailwind
classes (e.g., `h-100`) to improve maintainability and visual
consistency during data fetching.

## Pillar

- [ ] 🎨 Pillar 1 — New Theme Design
- [ ] 📐 Pillar 2 — Geometric SVG Improvement
- [ ] 🕐 Pillar 3 — Timezone Logic Optimization
- [x] 🛠️ Other (Bug fix, refactoring, docs)

## Visual Preview
<img width="1639" height="963" alt="스크린샷"
src="https://github.com/user-attachments/assets/2b88144c-4601-4e9b-b118-d672601d3d1d"
/>


## Checklist before requesting a review:

- [x] I have read the `CONTRIBUTING.md` file.
- [x] I have tested these changes locally
(`localhost:3000/api/streak?user=YOUR_USERNAME`).
- [x] I have run `npm run format` and `npm run lint` locally and
resolved all errors (CI will fail otherwise).
- [x] My commits follow the Conventional Commits format (e.g.,
`feat(themes): ...`, `fix(calculate): ...`).
- [x] I have updated `README.md` if I added a new theme or URL
parameter.
- [x] I have started the repo.
- [x] I have made sure that i have only one commit to merge in this PR.
- [x] The SVG output matches the CommitPulse "premium quality" aesthetic
standard (no raw elements, smooth animations, correct fonts).
- [ ] (Recommended) I joined the CommitPulse Discord community for
contributor discussions, mentorship, and faster PR support.

Author: JhaSourav07

app/(root)/dashboard/loading.tsx

@@ -1,12 +1,23 @@
 import StatsCardSkeleton from '@/components/dashboard/StatsCardSkeleton';
+import AchievementsSkeleton from '@/components/dashboard/AchievementsSkeleton';
 
 export default function DashboardLoading() {
   return (
     <div className="p-4 md:p-6 lg:p-8 min-h-screen">
       <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">
-          <div className="h-[480px] rounded-2xl shimmer border border-white/10" />
+          {/* Profile Card Skeleton Placeholder */}
+          <div className="h-100 rounded-2xl shimmer border border-white/10" />
+
+          {/* Achievements Skeleton */}
+          <div className="p-6 rounded-xl bg-[#0a0a0a] border border-[rgba(255,255,255,0.08)]">
+            <div className="flex items-center gap-2.5 mb-5">
+              <div className="w-4 h-4 shimmer rounded" />
+              <div className="w-24 h-4 shimmer rounded" />
+            </div>
+            <AchievementsSkeleton />
+          </div>
         </div>
 
         {/* Main Content Skeleton */}

components/dashboard/AchievementsSkeleton.tsx

@@ -0,0 +1,9 @@
+export default function AchievementsSkeleton() {
+  return (
+    <div className="grid grid-cols-2 gap-2">
+      {[...Array(4)].map((_, i) => (
+        <div key={i} className="h-16 shimmer rounded border border-white/5" />
+      ))}
+    </div>
+  );
+}