Simplify page transitions to loading indicator only, add skeleton loading for week transitions in TutorialTasks

client/src/components/Layout.tsx

@@ -133,16 +133,10 @@ const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
         </div>
       </div>
 
-      {/* Main Content with Page Transitions */}
-      <main 
-        className={`transition-all duration-300 ease-in-out ${
-          isTransitioning 
-            ? 'opacity-50 scale-95 transform' 
-            : 'opacity-100 scale-100'
-        }`}
-      >
-        {children}
-      </main>
+                        {/* Main Content */}
+                  <main>
+                    {children}
+                  </main>
       
       {/* Transition Loading Indicator */}
       {isTransitioning && (

client/src/pages/TutorialTasks.tsx

@@ -671,16 +671,46 @@ const TutorialTasks: React.FC = () => {
           </div>
         </div>
 
-        {/* Content with Week Transition Animation */}
-        <div 
-          className={`transition-all duration-300 ease-in-out ${
-            isWeekTransitioning 
-              ? 'opacity-50 scale-95 transform' 
-              : 'opacity-100 scale-100'
-          }`}
-        >
-          {/* Translation Brief - Shown once at the top */}
-          {tutorialWeek && tutorialWeek.translationBrief ? (
+        {/* Content with Week Transition Skeleton */}
+        {isWeekTransitioning ? (
+          <div className="space-y-6">
+            {/* 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>
+            </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>
+        ) : (
+          <>
+            {/* Translation Brief - Shown once at the top */}
+            {tutorialWeek && tutorialWeek.translationBrief ? (
           <div className="bg-white rounded-lg p-6 mb-8 border border-gray-200 shadow-sm">
             <div className="flex items-center justify-between mb-4">
               <div className="flex items-center space-x-3">
@@ -1323,7 +1353,8 @@ const TutorialTasks: React.FC = () => {
             ))
           )}
         </div>
-        </div>
+        </>
+        )}
       </div>
 
       {/* Edit Submission Modal */}