Upload folder using huggingface_hub

client/src/pages/TutorialTasks.tsx

@@ -890,30 +890,26 @@ const TutorialTasks: React.FC = () => {
           return { ...prev, [taskId]: next };
         });
 
-        // Defer state updates; on Safari skip refetch to avoid extra DOM churn
-        if (!isSafari) {
-          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 });
-              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 {
+        // 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 {
         console.error('Failed to submit translation:', response.data);
       }
@@ -989,8 +985,8 @@ const TutorialTasks: React.FC = () => {
 
       if (response.status === 200) {
   
-        // Optimistic removal to keep UI in sync immediately (Safari skips refetch)
-        if (taskId) {
+        // Optimistic removal (disabled on Safari to prevent multi-phase jumps)
+        if (taskId && !isSafari) {
           setUserSubmissions(prev => {
             const list = prev[taskId] || [];
             const next = list.filter(s => s._id !== submissionId);
@@ -998,28 +994,28 @@ const TutorialTasks: React.FC = () => {
           });
         }
 
-        // Defer refetch; on Safari skip and rely on optimistic removal
-        if (!isSafari) {
-          if (taskId) lockCardHeightById(taskId);
-          withPreservedCardOffset(taskId || '', () => {
-            React.startTransition(() => {
-              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 {
-                requestAnimationFrame(() => requestAnimationFrame(() => fetchUserSubmissions(tutorialTasks)));
-              }
-            });
+        // Defer refetch to prevent UI jumping and preserve scroll around DOM updates
+        if (taskId) lockCardHeightById(taskId);
+        withPreservedCardOffset(taskId || '', () => {
+          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 {
 
       }