Upload folder using huggingface_hub

client/src/pages/TutorialTasks.tsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect, useCallback, useRef, useLayoutEffect } from 'react';
+import { flushSync } from 'react-dom';
 import { useNavigate } from 'react-router-dom';
 import { api } from '../services/api';
 import { 
@@ -670,10 +671,10 @@ const TutorialTasks: React.FC = () => {
       lockGridHeightById(taskId);
       withPreservedCardOffset(taskId, () => {
         setMutatingTaskId(taskId);
-        setExpandedSections(prev => ({
-          ...prev,
-          [taskId]: !prev[taskId]
-        }));
+    setExpandedSections(prev => ({
+      ...prev,
+      [taskId]: !prev[taskId]
+    }));
       });
       requestAnimationFrame(() => requestAnimationFrame(() => {
         unlockListHeight();
@@ -864,16 +865,39 @@ const TutorialTasks: React.FC = () => {
       lockCardHeightById(taskId);
       lockGridHeightById(taskId);
       withPreservedCardOffset(taskId, () => {
-        setSubmitting({ ...submitting, [taskId]: true });
+      setSubmitting({ ...submitting, [taskId]: true });
       });
       const user = JSON.parse(localStorage.getItem('user') || '{}');
+      // Safari: build the optimistic item synchronously so height stays stable; do network after paint
+      let optimisticId: string | null = null;
+      const userName = user.name || 'Unknown';
+      flushSync(() => {
+        const temp = {
+          _id: `optimistic-${Date.now()}`,
+        sourceTextId: taskId,
+          transcreation: text,
+          groupNumber: group,
+        culturalAdaptations: [],
+          username: userName,
+          status: 'pending',
+          isOwner: true,
+          createdAt: new Date().toISOString()
+        } as any;
+        optimisticId = temp._id;
+        setUserSubmissions(prev => {
+          const current = prev[taskId] || [];
+          const next = [temp, ...current];
+          return { ...prev, [taskId]: next };
+        });
+      });
+
       const response = await new Promise((resolve) => requestAnimationFrame(async () => {
         const res = await api.post('/api/submissions', {
           sourceTextId: taskId,
           transcreation: text,
           groupNumber: group,
           culturalAdaptations: [],
-          username: user.name || 'Unknown'
+          username: userName
         });
         resolve(res);
       })) as any;
@@ -882,14 +906,14 @@ const TutorialTasks: React.FC = () => {
         const created = response.data;
         console.log('Submission created successfully:', created);
 
-        // Optimistic append (disabled on Safari to prevent multi-phase jumps)
-        if (!isSafari) {
-          setUserSubmissions(prev => {
-            const current = prev[taskId] || [];
-            const next = [{ ...created, isOwner: true }, ...current];
-            return { ...prev, [taskId]: next };
-          });
-        }
+        // Replace optimistic item (if any) with server item to avoid extra height changes
+        setUserSubmissions(prev => {
+          const current = prev[taskId] || [];
+          const mapped = current.map(s => (optimisticId && s._id === optimisticId) ? { ...created, isOwner: true } : s);
+          // If optimistic not found (e.g., not Safari), prepend as usual
+          const next = (optimisticId && current.some(s => s._id === optimisticId)) ? mapped : [{ ...created, isOwner: true }, ...current];
+          return { ...prev, [taskId]: next };
+        });
 
         // Defer state updates and minimal refetch
         // Measure grid height and set spacer before refetch to keep layout height constant
@@ -898,12 +922,14 @@ const TutorialTasks: React.FC = () => {
         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
+        setTranslationText({ ...translationText, [taskId]: '' });
+        setSelectedGroups({ ...selectedGroups, [taskId]: 0 });
+            // Narrow refetch: only this task's submissions. Build off-DOM then swap in one commit
             api.get(`/api/submissions/by-source/${taskId}`).then(r => {
               const list = (r.data && r.data.submissions) || [];
-              setUserSubmissions(prev => ({ ...prev, [taskId]: list }));
+              flushSync(() => {
+                setUserSubmissions(prev => ({ ...prev, [taskId]: list }));
+              });
               requestAnimationFrame(() => setSpacerHeights(prev => ({ ...prev, [taskId]: 0 })));
             }).catch(() => {
               requestAnimationFrame(() => setSpacerHeights(prev => ({ ...prev, [taskId]: 0 })));
@@ -918,7 +944,7 @@ const TutorialTasks: React.FC = () => {
       
     } finally {
       withPreservedCardOffset(taskId, () => {
-        setSubmitting({ ...submitting, [taskId]: false });
+      setSubmitting({ ...submitting, [taskId]: false });
       });
       // release after a couple frames to let DOM settle (extra frame on Safari)
       const release = () => {