diff --git a/dashboards/tracker-web/src/app/roadmap/page.tsx b/dashboards/tracker-web/src/app/roadmap/page.tsx
index ab7eb652..746f3017 100644
--- a/dashboards/tracker-web/src/app/roadmap/page.tsx
+++ b/dashboards/tracker-web/src/app/roadmap/page.tsx
@@ -280,7 +280,63 @@ export default function RoadmapPage() {
         </div>
 
         {loading ? (
-          <div className="text-center py-20 text-slate-400">Loading roadmap...</div>
+          view === 'board' ? (
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+              {STATUS_COLUMNS.map(col => (
+                <div key={col.key} className="space-y-3">
+                  <div className="flex items-center gap-2 mb-2">
+                    <span className={`w-3 h-3 rounded-full ${col.color} animate-pulse`} />
+                    <h2
+                      className={`font-semibold ${col.textColor} h-5 w-24 bg-slate-200 dark:bg-slate-700 rounded animate-pulse`}
+                    />
+                  </div>
+                  {[1, 2, 3].map(i => (
+                    <div
+                      key={i}
+                      className="bg-white dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-700 p-4"
+                    >
+                      <div className="flex items-start gap-3">
+                        <div className="flex flex-col items-center min-w-[44px] py-1.5 px-2">
+                          <div className="h-4 w-4 bg-slate-200 dark:bg-slate-700 rounded animate-pulse" />
+                          <div className="h-4 w-6 bg-slate-200 dark:bg-slate-700 rounded mt-1 animate-pulse" />
+                        </div>
+                        <div className="flex-1 min-w-0 space-y-2">
+                          <div className="h-4 w-full bg-slate-200 dark:bg-slate-700 rounded animate-pulse" />
+                          <div className="h-3 w-3/4 bg-slate-200 dark:bg-slate-700 rounded animate-pulse" />
+                          <div className="flex gap-2 pt-2">
+                            <div className="h-5 w-12 bg-slate-200 dark:bg-slate-700 rounded-full animate-pulse" />
+                            <div className="h-5 w-12 bg-slate-200 dark:bg-slate-700 rounded-full animate-pulse" />
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              ))}
+            </div>
+          ) : (
+            <div className="space-y-3">
+              {[1, 2, 3, 4, 5].map(i => (
+                <div
+                  key={i}
+                  className="bg-white dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-700 p-4 flex items-center gap-4"
+                >
+                  <div className="flex flex-col items-center min-w-[44px] py-1.5 px-2">
+                    <div className="h-4 w-4 bg-slate-200 dark:bg-slate-700 rounded animate-pulse" />
+                    <div className="h-4 w-6 bg-slate-200 dark:bg-slate-700 rounded mt-1 animate-pulse" />
+                  </div>
+                  <div className="flex-1 min-w-0 space-y-2">
+                    <div className="h-4 w-full bg-slate-200 dark:bg-slate-700 rounded animate-pulse" />
+                    <div className="h-3 w-1/2 bg-slate-200 dark:bg-slate-700 rounded animate-pulse" />
+                  </div>
+                  <div className="flex items-center gap-2 shrink-0">
+                    <div className="h-5 w-12 bg-slate-200 dark:bg-slate-700 rounded-full animate-pulse" />
+                    <div className="h-4 w-16 bg-slate-200 dark:bg-slate-700 rounded animate-pulse" />
+                  </div>
+                </div>
+              ))}
+            </div>
+          )
         ) : view === 'board' ? (
           /* Board View */
           <div className="grid grid-cols-1 md:grid-cols-3 gap-6">