Upload folder using huggingface_hub

client/src/pages/TutorialTasks.tsx

@@ -857,11 +857,24 @@ const TutorialTasks: React.FC = () => {
           return { ...prev, [taskId]: next };
         });
 
-        // Defer only local state clears; skip refetch to avoid DOM churn
+        // Defer state updates and minimal refetch
+        // Measure grid height and set spacer before refetch to keep layout height constant
+        const gridEl = submissionsGridRefs.current[taskId];
+        const gridHeight = gridEl ? gridEl.getBoundingClientRect().height : 0;
+        if (gridHeight > 0) setSpacerHeights(prev => ({ ...prev, [taskId]: gridHeight }));
         withPreservedCardOffset(taskId, () => {
           React.startTransition(() => {
             setTranslationText({ ...translationText, [taskId]: '' });
             setSelectedGroups({ ...selectedGroups, [taskId]: 0 });
+            // Narrow refetch: only this task's submissions
+            api.get(`/api/submissions/by-source/${taskId}`).then(r => {
+              const list = (r.data && r.data.submissions) || [];
+              setUserSubmissions(prev => ({ ...prev, [taskId]: list }));
+              // Release spacer one frame after list update to avoid jump
+              requestAnimationFrame(() => setSpacerHeights(prev => ({ ...prev, [taskId]: 0 })));
+            }).catch(() => {
+              requestAnimationFrame(() => setSpacerHeights(prev => ({ ...prev, [taskId]: 0 })));
+            });
           });
         });
       } else {
@@ -874,12 +887,12 @@ const TutorialTasks: React.FC = () => {
       withPreservedCardOffset(taskId, () => {
       setSubmitting({ ...submitting, [taskId]: false });
       });
-      // release after a couple frames to let DOM settle
-      requestAnimationFrame(() => requestAnimationFrame(() => {
+      // release after a few frames to let Safari settle layout
+      requestAnimationFrame(() => requestAnimationFrame(() => requestAnimationFrame(() => {
         unlockListHeight();
         unlockCardHeightById(taskId);
         unlockGridHeightById(taskId);
-      }));
+      })));
       setMutatingTaskId(null);
     }
   };
@@ -941,10 +954,27 @@ const TutorialTasks: React.FC = () => {
           });
         }
 
-        // Skip refetch entirely to avoid layout churn; UI already updated optimistically
+        // Defer refetch to prevent UI jumping and preserve scroll around DOM updates
         if (taskId) lockCardHeightById(taskId);
         withPreservedCardOffset(taskId || '', () => {
-          React.startTransition(() => {});
+          React.startTransition(() => {
+            // Narrow refetch: only this task's submissions
+            if (taskId) {
+              const gridEl = submissionsGridRefs.current[taskId];
+              const gridHeight = gridEl ? gridEl.getBoundingClientRect().height : 0;
+              if (gridHeight > 0) setSpacerHeights(prev => ({ ...prev, [taskId]: gridHeight }));
+              api.get(`/api/submissions/by-source/${taskId}`).then(r => {
+                const list = (r.data && r.data.submissions) || [];
+                setUserSubmissions(prev => ({ ...prev, [taskId]: list }));
+                requestAnimationFrame(() => setSpacerHeights(prev => ({ ...prev, [taskId]: 0 })));
+              }).catch(() => {
+                requestAnimationFrame(() => setSpacerHeights(prev => ({ ...prev, [taskId]: 0 })));
+              });
+            } else {
+              // Fallback
+              requestAnimationFrame(() => requestAnimationFrame(() => fetchUserSubmissions(tutorialTasks)));
+            }
+          });
         });
       } else {
 
@@ -2253,7 +2283,7 @@ const TutorialTasks: React.FC = () => {
                       expandedSections[task._id] 
                         ? 'max-h-none overflow-visible' 
                         : 'max-h-0 overflow-hidden'
-                    }`}>
+                    }`} style={{ contain: 'layout paint size' }}>
                       {userSubmissions[task._id].map((submission, index) => (
                         <div key={submission._id} className="bg-white rounded-lg p-3 border border-stone-200 flex flex-col justify-between h-full">
                           <div className="flex items-center justify-between mb-2">