Upload folder using huggingface_hub

client/src/pages/TutorialTasks.tsx

@@ -858,15 +858,23 @@ const TutorialTasks: React.FC = () => {
         });
 
         // 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 });
+            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 }));
-            }).catch(() => {});
+              // Release spacer one frame after list update to avoid jump
+              requestAnimationFrame(() => setSpacerHeights(prev => ({ ...prev, [taskId]: 0 })));
+            }).catch(() => {
+              requestAnimationFrame(() => setSpacerHeights(prev => ({ ...prev, [taskId]: 0 })));
+            });
           });
         });
       } else {
@@ -952,10 +960,16 @@ const TutorialTasks: React.FC = () => {
           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 }));
-              }).catch(() => {});
+                requestAnimationFrame(() => setSpacerHeights(prev => ({ ...prev, [taskId]: 0 })));
+              }).catch(() => {
+                requestAnimationFrame(() => setSpacerHeights(prev => ({ ...prev, [taskId]: 0 })));
+              });
             } else {
               // Fallback
               requestAnimationFrame(() => requestAnimationFrame(() => fetchUserSubmissions(tutorialTasks)));