diff --git a/package-lock.json b/package-lock.json
index 2b167f6b..66fb7c1c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -23037,6 +23037,7 @@
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
       "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
       "optional": true,
diff --git a/src/components/features/SkillTreeVisualizer.tsx b/src/components/features/SkillTreeVisualizer.tsx
index 35e20a88..dc3bf7a8 100644
--- a/src/components/features/SkillTreeVisualizer.tsx
+++ b/src/components/features/SkillTreeVisualizer.tsx
@@ -131,7 +131,45 @@ export default function SkillTreeVisualizer({ initialPath }: { initialPath?: "Fr
     window.addEventListener('close-all-overlays', handleCloseAll);
     return () => window.removeEventListener('close-all-overlays', handleCloseAll);
   }, []);
+  if (loading) {
+    return (
+      <div className={`${styles.container} w-full flex flex-col items-center bg-[#0f1115] p-6 rounded-xl border border-slate-800`} aria-busy="true" aria-label="Loading roadmap">
+        <div className="w-full max-w-[800px] mb-8 bg-slate-900/40 border border-slate-800/80 rounded-xl p-5 animate-pulse">
+          <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
+            <div className="space-y-2">
+              <div className="h-5 w-48 rounded bg-slate-700/50" />
+              <div className="h-3 w-64 rounded bg-slate-700/40" />
+            </div>
+            <div className="flex flex-col sm:items-end gap-2">
+              <div className="h-4 w-32 rounded bg-slate-700/50" />
+              <div className="h-3 w-24 rounded bg-slate-700/40" />
+            </div>
+          </div>
+          <div className="mt-4 h-2.5 w-full rounded-full bg-slate-700/40" />
+        </div>
+
+        <div className={styles.controls}>
+          <div className="h-9 w-32 rounded-lg bg-slate-700/40 animate-pulse" />
+          <div className="h-9 w-32 rounded-lg bg-slate-700/40 animate-pulse" />
+        </div>
 
+        <div className={styles.treeArea}>
+          {pathsData[activePath].map((node) => (
+            <div
+              key={node.id}
+              className={`${styles.node} animate-pulse`}
+              style={{
+                left: `${node.x}%`,
+                top: `${node.y}%`,
+                borderColor: '#30363d',
+                background: 'rgba(48,54,61,0.4)',
+              }}
+            />
+          ))}
+        </div>
+      </div>
+    );
+  }
   return (
     <div className={`${styles.container} w-full flex flex-col items-center bg-[#0f1115] p-6 rounded-xl border border-slate-800`}>
       
diff --git a/src/components/profile/UserProfile.tsx b/src/components/profile/UserProfile.tsx
index 8b1ceb06..b0f95267 100644
--- a/src/components/profile/UserProfile.tsx
+++ b/src/components/profile/UserProfile.tsx
@@ -979,8 +979,22 @@ export default function UserProfile() {
             </div>
 
             {loadingProjects ? (
-              <div className="flex justify-center py-12">
-                <div className="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-primary"></div>
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-6" aria-busy="true" aria-label="Loading projects">
+                {Array.from({ length: 4 }).map((_, i) => (
+                  <div
+                    key={i}
+                    className="rounded-xl border border-border/50 bg-muted/20 p-5 animate-pulse"
+                  >
+                    <div className="h-40 w-full rounded-lg bg-muted/40 mb-4" />
+                    <div className="h-5 w-3/4 rounded bg-muted/40 mb-2" />
+                    <div className="h-3 w-full rounded bg-muted/30 mb-1" />
+                    <div className="h-3 w-5/6 rounded bg-muted/30 mb-4" />
+                    <div className="flex gap-2">
+                      <div className="h-5 w-16 rounded-full bg-muted/30" />
+                      <div className="h-5 w-16 rounded-full bg-muted/30" />
+                    </div>
+                  </div>
+                ))}
               </div>
             ) : projects.length === 0 ? (
               <div className="text-center py-12 text-muted-foreground bg-muted/20 rounded-xl border border-border/50 border-dashed">
@@ -1095,10 +1109,19 @@ export default function UserProfile() {
 
             <div className="flex-1 overflow-y-auto space-y-4 min-h-[200px]">
               {isLoadingFollowers ? (
-                <div className="flex justify-center py-8">
-                  <div className="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-primary"></div>
-                </div>
-              ) : followersList.length === 0 ? (
+  <div className="space-y-4" aria-busy="true" aria-label="Loading followers">
+    {Array.from({ length: 5 }).map((_, i) => (
+      <div key={i} className="flex items-center gap-3 p-2 animate-pulse">
+        <div className="w-10 h-10 rounded-full bg-muted/40 flex-shrink-0" />
+        <div className="flex-1 space-y-2">
+          <div className="h-4 w-2/5 rounded bg-muted/40" />
+          <div className="h-3 w-1/4 rounded bg-muted/30" />
+        </div>
+        <div className="h-6 w-14 rounded-full bg-muted/30 flex-shrink-0" />
+      </div>
+    ))}
+  </div>
+) : followersList.length === 0 ? (
                 <div className="text-center py-8 text-muted-foreground">
                   No followers yet.
                 </div>
@@ -1158,10 +1181,19 @@ export default function UserProfile() {
 
             <div className="flex-1 overflow-y-auto space-y-4 min-h-[200px]">
               {isLoadingFollowing ? (
-                <div className="flex justify-center py-8">
-                  <div className="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-primary"></div>
-                </div>
-              ) : followingList.length === 0 ? (
+  <div className="space-y-4" aria-busy="true" aria-label="Loading following">
+    {Array.from({ length: 5 }).map((_, i) => (
+      <div key={i} className="flex items-center gap-3 p-2 animate-pulse">
+        <div className="w-10 h-10 rounded-full bg-muted/40 flex-shrink-0" />
+        <div className="flex-1 space-y-2">
+          <div className="h-4 w-2/5 rounded bg-muted/40" />
+          <div className="h-3 w-1/4 rounded bg-muted/30" />
+        </div>
+        <div className="h-6 w-14 rounded-full bg-muted/30 flex-shrink-0" />
+      </div>
+    ))}
+  </div>
+) : followingList.length === 0 ? (
                 <div className="text-center py-8 text-muted-foreground">
                   Not following anyone yet.
                 </div>