feat: enhance loading state UI with improved skeleton screens

Author: chahatkesh

src/components/dashboard/LearningProgressSection.jsx

@@ -172,12 +172,53 @@ const LearningProgressSection = ({ user }) => {
 
   if (loading) {
     return (
-      <div className="space-y-6">
-        <div className="bg-white rounded-lg shadow-sm border p-6">
-          <div className="animate-pulse space-y-4">
-            <div className="h-4 bg-gray-200 rounded w-1/4"></div>
-            <div className="h-8 bg-gray-200 rounded"></div>
-            <div className="h-4 bg-gray-200 rounded w-3/4"></div>
+      <div className="min-h-screen bg-gray-50">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
+          <div className="animate-pulse space-y-6">
+            {/* Header skeleton */}
+            <div className="bg-white rounded-2xl border border-gray-100 p-6 space-y-4">
+              <div className="h-8 bg-gray-200 rounded w-1/3"></div>
+              <div className="h-4 bg-gray-200 rounded w-2/3"></div>
+            </div>
+
+            {/* Progress stats skeleton */}
+            <div className="bg-white rounded-2xl border border-gray-100 p-6">
+              <div className="h-6 bg-gray-200 rounded w-1/4 mb-6"></div>
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+                {[1, 2, 3].map(i => (
+                  <div key={i} className="text-center space-y-4">
+                    <div className="w-20 h-20 bg-gray-200 rounded-full mx-auto"></div>
+                    <div className="h-4 bg-gray-200 rounded w-24 mx-auto"></div>
+                    <div className="h-3 bg-gray-200 rounded w-16 mx-auto"></div>
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            {/* Available Learning Paths skeleton */}
+            <div className="bg-white rounded-2xl border border-gray-100 p-6">
+              <div className="h-6 bg-gray-200 rounded w-1/3 mb-6"></div>
+              <div className="space-y-4">
+                {[1, 2, 3].map(i => (
+                  <div key={i} className="border border-gray-100 rounded-xl p-6">
+                    <div className="h-5 bg-gray-200 rounded w-1/4 mb-4"></div>
+                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                      {[1, 2].map(j => (
+                        <div key={j} className="p-4 bg-gray-50 rounded-lg">
+                          <div className="h-4 bg-gray-200 rounded w-3/4 mb-2"></div>
+                          <div className="h-3 bg-gray-200 rounded w-full mb-3"></div>
+                          <div className="flex space-x-2">
+                            <div className="h-3 bg-gray-200 rounded w-12"></div>
+                            <div className="h-3 bg-gray-200 rounded w-16"></div>
+                            <div className="h-3 bg-gray-200 rounded w-14"></div>
+                          </div>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
           </div>
         </div>
       </div>