Add dynamic transition duration and spinner loading for WeeklyPractice week switches

client/src/components/Layout.tsx

@@ -53,6 +53,18 @@ const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
         transitionDuration = 1200; // Longer for content-heavy pages
       }
       
+      // Special case: Weekly Practice → Tutorial Tasks Week 2 (longer duration)
+      if (location.pathname === '/tutorial-tasks' && 
+          previousPath && 
+          previousPath.includes('/weekly-practice')) {
+        // Check if navigating to Week 2
+        const urlParams = new URLSearchParams(window.location.search);
+        const week = urlParams.get('week');
+        if (week === '2') {
+          transitionDuration = 1500; // Extended duration for Week 2
+        }
+      }
+      
       // End transition after content is loaded (wait for DOM updates)
       const timer = setTimeout(() => {
         setIsTransitioning(false);

client/src/pages/WeeklyPractice.tsx

@@ -1149,8 +1149,16 @@ const WeeklyPractice: React.FC = () => {
           </div>
         </div>
 
+        {/* Week Transition Loading Spinner */}
+        {isWeekTransitioning && (
+          <div className="flex items-center justify-center py-12">
+            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-indigo-600"></div>
+            <span className="ml-3 text-gray-600">Loading week {selectedWeek}...</span>
+          </div>
+        )}
+
         {/* Translation Brief - Shown once at the top */}
-        {weeklyPracticeWeek && weeklyPracticeWeek.translationBrief ? (
+        {!isWeekTransitioning && weeklyPracticeWeek && weeklyPracticeWeek.translationBrief ? (
           <div className="bg-gradient-to-r from-blue-50 to-indigo-50 rounded-xl p-8 mb-8 border border-blue-200">
             <div className="flex items-center justify-between mb-4">
               <div className="flex items-center space-x-2">
@@ -1671,18 +1679,20 @@ const WeeklyPractice: React.FC = () => {
             </div>
           )}
 
-          {weeklyPractice.length === 0 && !addingPractice ? (
-            <div className="text-center py-12">
-              <DocumentTextIcon className="h-12 w-12 text-gray-400 mx-auto mb-4" />
-              <h3 className="text-lg font-medium text-gray-900 mb-2">
-                No practice examples available
-              </h3>
-              <p className="text-gray-600">
-                Practice examples for Week {selectedWeek} haven't been set up yet.
-              </p>
-            </div>
-          ) : (
-            weeklyPractice.map((practice) => (
+          {!isWeekTransitioning && (
+            <>
+              {weeklyPractice.length === 0 && !addingPractice ? (
+                <div className="text-center py-12">
+                  <DocumentTextIcon className="h-12 w-12 text-gray-400 mx-auto mb-4" />
+                  <h3 className="text-lg font-medium text-gray-900 mb-2">
+                    No practice examples available
+                  </h3>
+                  <p className="text-gray-600">
+                    Practice examples for Week {selectedWeek} haven't been set up yet.
+                  </p>
+                </div>
+              ) : (
+                weeklyPractice.map((practice) => (
               <div key={practice._id} className="bg-white rounded-xl shadow-lg border border-gray-100 p-8 hover:shadow-xl transition-shadow duration-300">
                 <div className="mb-6">
                   <div className="flex items-center justify-between mb-4">
@@ -2003,6 +2013,8 @@ const WeeklyPractice: React.FC = () => {
               </div>
             ))
           )}
+        </>
+        )}
         </div>
         )}
       </div>