Add spinner loading to TutorialTasks week switches and increase Week 2 transition duration to 2000ms

client/src/components/Layout.tsx

@@ -60,7 +60,7 @@ const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
         // Check if navigating to Week 2 (use localStorage since URL might not be updated yet)
         const tutorialWeek = localStorage.getItem('selectedTutorialWeek');
         if (tutorialWeek === '2') {
-          transitionDuration = 1500; // Extended duration for Week 2
+          transitionDuration = 2000; // Extended duration for Week 2
         }
       }
       

client/src/pages/TutorialTasks.tsx

@@ -740,43 +740,17 @@ const TutorialTasks: React.FC = () => {
           </div>
         </div>
 
-                {/* Content with Week Transition Skeleton */}
-        {isWeekTransitioning ? (
-          <div className="space-y-6 animate-pulse" style={{ animationDuration: '600ms' }}>
-            {/* Skeleton for Translation Brief */}
-            <div className="bg-white rounded-lg p-6 mb-8 border border-gray-200 shadow-sm animate-pulse">
-              <div className="flex items-center justify-between mb-4">
-                <div className="flex items-center space-x-3">
-                  <div className="bg-gray-300 rounded-lg p-2 h-9 w-9"></div>
-                  <div className="h-6 bg-gray-300 rounded w-32"></div>
-                </div>
-              </div>
-              <div className="space-y-3">
-                <div className="h-4 bg-gray-300 rounded w-full"></div>
-                <div className="h-4 bg-gray-300 rounded w-3/4"></div>
-                <div className="h-4 bg-gray-300 rounded w-1/2"></div>
-              </div>
+                {/* Week Transition Loading Spinner */}
+        {isWeekTransitioning && (
+          <div className="fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-50">
+            <div className="bg-white rounded-lg shadow-lg p-4 flex items-center space-x-3">
+              <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-indigo-600"></div>
+              <span className="text-gray-700 font-medium">Loading...</span>
             </div>
-            
-            {/* Skeleton for Tasks */}
-            {[1, 2, 3].map((i) => (
-              <div key={i} className="bg-white rounded-xl shadow-lg border border-gray-100 p-8 animate-pulse">
-                <div className="flex items-center justify-between mb-6">
-                  <div className="flex items-center space-x-3">
-                    <div className="bg-gray-300 rounded-full p-2 h-9 w-9"></div>
-                    <div className="h-5 bg-gray-300 rounded w-24"></div>
-                  </div>
-                </div>
-                <div className="space-y-4">
-                  <div className="h-4 bg-gray-300 rounded w-full"></div>
-                  <div className="h-4 bg-gray-300 rounded w-5/6"></div>
-                  <div className="h-4 bg-gray-300 rounded w-4/5"></div>
-                  <div className="h-4 bg-gray-300 rounded w-3/4"></div>
-                </div>
-              </div>
-            ))}
           </div>
-        ) : (
+        )}
+
+        {!isWeekTransitioning && (
           <>
             {/* Translation Brief - Shown once at the top */}
             {tutorialWeek && tutorialWeek.translationBrief ? (