feat: improve loading states with AccessibleLoading for better access…

src/app/components/accessibility/ScreenReaderOptimizer.tsx

@@ -104,11 +104,19 @@ export function AccessibleDescription({ id, children }: AccessibleDescriptionPro
 interface AccessibleLoadingProps {
   message?: string;
   isLoading: boolean;
+  className?: string;
+  spinnerClassName?: string;
+  showText?: boolean;
+  spinner?: React.ReactNode;
 }
 
 export function AccessibleLoading({
   message = 'Loading content',
   isLoading,
+  className = 'flex items-center justify-center p-4',
+  spinnerClassName = 'animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600',
+  showText = false,
+  spinner,
 }: AccessibleLoadingProps) {
   const announce = useScreenReaderAnnouncement();
 
@@ -127,10 +135,14 @@ export function AccessibleLoading({
       role="status"
       aria-live="polite"
       aria-busy="true"
-      className="flex items-center justify-center p-4"
+      className={className}
     >
-      <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600" />
-      <span className="sr-only">{message}</span>
+      {spinner || <div className={spinnerClassName} />}
+      {showText ? (
+        <span className="ml-2 text-sm font-medium text-gray-700 dark:text-gray-300">{message}</span>
+      ) : (
+        <span className="sr-only">{message}</span>
+      )}
     </div>
   );
 }

src/app/components/dashboard/widgets/LearningStreakWidget.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { AccessibleLoading } from '../../accessibility/ScreenReaderOptimizer';
 import { motion } from 'framer-motion';
 import { Flame, Trophy, Target, Settings } from 'lucide-react';
 
@@ -177,7 +177,7 @@ export const LearningStreakWidget: React.FC<LearningStreakWidgetProps> = ({
 
       {/* Content */}
       <div className="p-4 space-y-4">
-        {isLoading && <div className="text-sm text-gray-500">Loading…</div>}
+        {isLoading && <AccessibleLoading isLoading={true} message="Loading…" />}
         {error && <div className="text-sm text-red-600">{error}</div>}
         {/* Current Streak */}
         <div className="text-center">

src/app/components/dashboard/widgets/ProgressSummaryWidget.tsx

@@ -2,7 +2,7 @@
 
 import React, { useEffect, useState } from 'react';
 import { motion } from 'framer-motion';
-import { DollarSign, Users, BarChart3, BookOpen, TrendingUp, Settings } from 'lucide-react';
+import { AccessibleLoading } from '../../accessibility/ScreenReaderOptimizer';
 
 interface ProgressSummaryWidgetProps {
   id: string;
@@ -162,7 +162,7 @@ export const ProgressSummaryWidget: React.FC<ProgressSummaryWidgetProps> = ({
         layout
         className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6 hover:shadow-md transition-shadow"
       >
-        {isLoading && <div className="text-sm text-gray-500 dark:text-gray-400">Loading…</div>}
+        {isLoading && <AccessibleLoading isLoading={true} message="Loading…" />}
         {error && <div className="text-sm text-red-600 dark:text-red-400">{error}</div>}
 
         <div className="flex items-start justify-between mb-4">
@@ -321,7 +321,7 @@ export const ProgressSummaryWidget: React.FC<ProgressSummaryWidgetProps> = ({
 
       {/* Content */}
       <div className="p-6">
-        {isLoading && <div className="text-sm text-gray-500 dark:text-gray-400">Loading…</div>}
+        {isLoading && <AccessibleLoading isLoading={true} message="Loading…" />}
         {error && <div className="text-sm text-red-600 dark:text-red-400">{error}</div>}
 
         <div className="flex items-start justify-between mb-4">

src/app/components/dashboard/widgets/RecentActivityWidget.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useEffect, useState } from 'react';
+import { AccessibleLoading } from '../../accessibility/ScreenReaderOptimizer';
 import { motion } from 'framer-motion';
 import { Activity, Settings, Clock } from 'lucide-react';
 import { format } from 'date-fns';
@@ -245,7 +245,7 @@ export const RecentActivityWidget: React.FC<RecentActivityWidgetProps> = ({
 
       {/* Content */}
       <div className="p-4 space-y-4">
-        {isLoading && <div className="text-sm text-gray-500 dark:text-gray-400">Loading…</div>}
+        {isLoading && <AccessibleLoading isLoading={true} message="Loading…" />}
         {error && <div className="text-sm text-red-600 dark:text-red-400">{error}</div>}
 
         {/* Subtitle */}

src/app/components/dashboard/widgets/RecentSalesWidget.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import React, { useEffect, useState } from 'react';
+import { AccessibleLoading } from '../../accessibility/ScreenReaderOptimizer';
 import { motion } from 'framer-motion';
 import { DollarSign, Settings } from 'lucide-react';
 import { format } from 'date-fns';
@@ -236,7 +237,7 @@ export const RecentSalesWidget: React.FC<RecentSalesWidgetProps> = ({
 
       {/* Content */}
       <div className="p-4 space-y-4">
-        {isLoading && <div className="text-sm text-gray-500 dark:text-gray-400">Loading…</div>}
+        {isLoading && <AccessibleLoading isLoading={true} message="Loading…" />}
         {error && <div className="text-sm text-red-600 dark:text-red-400">{error}</div>}
 
         {/* Subtitle */}

src/app/components/dashboard/widgets/RecommendedCoursesWidget.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react';
+import { AccessibleLoading } from '../../accessibility/ScreenReaderOptimizer';
 import { motion } from 'framer-motion';
 import { BookOpen, Star, Clock, Users, Settings } from 'lucide-react';
 
@@ -217,7 +218,7 @@ export const RecommendedCoursesWidget: React.FC<RecommendedCoursesWidgetProps> =
       </div>
 
       <div className="space-y-4 p-4">
-        {isLoading && <div className="text-sm text-gray-500">Loading...</div>}
+        {isLoading && <AccessibleLoading isLoading={true} message="Loading..." />}
         {error && <div className="text-sm text-red-600">{error}</div>}
         {recommendedCourses.map((course, index) => (
           <motion.div

src/app/components/dashboard/widgets/UpcomingDeadlinesWidget.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import React, { useEffect, useState } from 'react';
+import { AccessibleLoading } from '../../accessibility/ScreenReaderOptimizer';
 import { motion } from 'framer-motion';
 import { Clock, Users, FileText, Settings } from 'lucide-react';
 import { format, isToday, isTomorrow, addDays } from 'date-fns';
@@ -216,7 +217,7 @@ export const UpcomingDeadlinesWidget: React.FC<UpcomingDeadlinesWidgetProps> = (
 
       {/* Content */}
       <div className="p-4 space-y-4">
-        {isLoading && <div className="text-sm text-gray-500 dark:text-gray-400">Loading…</div>}
+        {isLoading && <AccessibleLoading isLoading={true} message="Loading…" />}
         {error && <div className="text-sm text-red-600 dark:text-red-400">{error}</div>}
 
         {/* Subtitle */}

src/components/forms/SubmitButton.tsx

@@ -13,27 +13,11 @@
  */
 
 import React from 'react';
+import { AccessibleLoading } from '../../app/components/accessibility/ScreenReaderOptimizer';
 
 // ─── Spinner ──────────────────────────────────────────────────────────────────
 
-function Spinner({ className = '' }: { className?: string }) {
-  return (
-    <svg
-      className={`animate-spin ${className}`}
-      xmlns="http://www.w3.org/2000/svg"
-      fill="none"
-      viewBox="0 0 24 24"
-      aria-hidden="true"
-    >
-      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
-      <path
-        className="opacity-75"
-        fill="currentColor"
-        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
-      />
-    </svg>
-  );
-}
+
 
 // ─── Props ────────────────────────────────────────────────────────────────────
 
@@ -73,10 +57,13 @@ export const SubmitButton: React.FC<SubmitButtonProps> = ({
       {...props}
     >
       {isLoading ? (
-        <span className="inline-flex items-center gap-2">
-          <Spinner className={spinnerClassName} />
-          <span>{loadingText}</span>
-        </span>
+        <AccessibleLoading
+          isLoading={isLoading}
+          message={loadingText}
+          className="inline-flex items-center justify-center gap-2"
+          spinnerClassName={`animate-spin rounded-full border-b-2 border-current ${spinnerClassName}`}
+          showText={true}
+        />
       ) : (
         children
       )}