Add loading state feedback to dashboard share card button

src/app/dashboard/page.tsx

@@ -10,13 +10,19 @@ import { AdaptiveStudyPlan } from "@/components/AI/AdaptiveStudyPlan"
 import { useActiveUser } from "@/hooks/useActiveUser"
 
 export default function DashboardPage() {
-  const { user, hasAccessTo, loading } = useActiveUser()
+  const { user, userId, loading: userLoading, hasAccessTo, trialInfo } = useActiveUser()
-  const progressRef = useRef<HTMLDivElement>(null)
   const [userStats, setUserStats] = useState<any>(null)
+  const [loading, setLoading] = useState(true)
+  const [downloading, setDownloading] = useState(false)
+  const progressRef = useRef<HTMLDivElement>(null)
 
   useEffect(() => {
-    const userId = user?.id
+    if (userLoading) return
-    if (!userId) return
+    const currentUserId = user?.id || userId
+    if (!currentUserId) {
+      setLoading(false)
+      return
+    }
     async function fetchStats() {
       try {
         const res = await fetch(`/api/users/${userId}/stats`)
@@ -33,6 +39,7 @@ export default function DashboardPage() {
 
   const handleExport = async () => {
     try {
+      setDownloading(true)
       const score = isNew ? "0 / 0" : `${userStats?.today_score || 0} / ${userStats?.today_max_score || 60}`
       const accuracy = isNew ? "0%" : `${userStats?.overall_accuracy || 0}%`
       const qs = isNew ? "0" : (userStats?.total_questions_attempted || 0).toLocaleString()
@@ -57,6 +64,8 @@ export default function DashboardPage() {
       window.URL.revokeObjectURL(blobUrl)
     } catch (err) {
       console.error("Failed to export image", err)
+    } finally {
+      setDownloading(false)
     }
   }
 
@@ -89,8 +98,9 @@ export default function DashboardPage() {
               Your overall progress, scores, and active study plan at a glance.
             </p>
           </div>
-          <Button onClick={handleExport} variant="outline" size="sm" className="gap-2 font-medium shrink-0">
+          <Button onClick={handleExport} variant="outline" size="sm" className="gap-2 font-medium shrink-0" disabled={downloading}>
-            <Share2 size={16} /> Share Card
+            {downloading ? <div className="h-4 w-4 border-2 border-current border-t-transparent rounded-full animate-spin"></div> : <Share2 size={16} />}
+            {downloading ? 'Generating...' : 'Share Card'}
           </Button>
         </div>
         <div ref={progressRef} className="grid grid-cols-2 md:grid-cols-4 gap-4 p-4 -mx-4 bg-background rounded-2xl">