Оптимизация обновления реакций студентов и анимации карточек на странице пользователя. Упрощено добавление новых реакций и улучшено управление состоянием анимации студентов.

src/pages/lesson-details.tsx

@@ -137,29 +137,18 @@ const LessonDetail = () => {
         if (!groupedReactions[reaction.sub]) {
           groupedReactions[reaction.sub] = [];
         }
-        
+        groupedReactions[reaction.sub].push(reaction);
-        // Добавляем только новые реакции
-        const isNewReaction = !prevReactionsRef.current[reaction.sub]?.some(
-          r => r._id === reaction._id
-        );
-        
-        if (isNewReaction) {
-          groupedReactions[reaction.sub] = [reaction];
-        }
       });
       
       // Обновляем отображаемые реакции
       setStudentReactions(groupedReactions);
       
-      // Обновляем предыдущие реакции
+      // Обновляем предыдущие реакции после небольшой задержки
-      prevReactionsRef.current = { ...groupedReactions };
+      const updatePrevReactionsTimeout = setTimeout(() => {
+        prevReactionsRef.current = groupedReactions;
+      }, 1000);
       
-      // Сбрасываем отображаемые реакции через некоторое время
+      return () => clearTimeout(updatePrevReactionsTimeout);
-      const clearReactionsTimeout = setTimeout(() => {
-        setStudentReactions({});
-      }, 5000);
-      
-      return () => clearTimeout(clearReactionsTimeout);
     }
   }, [accessCode?.body?.lesson?.studentReactions]);
 

src/pages/user-page.tsx

@@ -63,28 +63,28 @@ const UserPage = () => {
   // Эффект для поэтапного появления карточек студентов
   useEffect(() => {
     if (ls.data?.body?.students?.length) {
-      // Сначала очищаем список
+      // Обновляем существующих студентов с сохранением их анимации
-      setAnimatedStudents([])
+      setAnimatedStudents(prevStudents => {
-      
+        const newStudents = ls.data.body.students.map(student => {
-      // Затем постепенно добавляем студентов для красивой анимации
+          // Находим существующего студента
-      const students = [...ls.data.body.students]
+          const existingStudent = prevStudents.find(p => p.sub === student.sub);
-      const addStudentWithDelay = (index) => {
+          // Сохраняем флаг isNew если студент уже существует
-        if (index < students.length) {
+          return {
-          setAnimatedStudents(prev => [...prev, {...students[index], isNew: true}])
+            ...student,
-          
+            isNew: existingStudent ? existingStudent.isNew : true
-          // Для следующего студента
+          };
-          setTimeout(() => {
+        });
-            addStudentWithDelay(index + 1)
+        
-          }, 100) // Уменьшенная задержка для более плавной анимации
+        // Если количество студентов не изменилось, сохраняем текущий массив
+        if (prevStudents.length === newStudents.length && 
+            prevStudents.every(student => newStudents.find(n => n.sub === student.sub))) {
+          return prevStudents;
         }
-      }
+        
-      
+        return newStudents;
-      // Запускаем процесс добавления с небольшой задержкой для лучшего UX
+      });
-      setTimeout(() => {
-        addStudentWithDelay(0)
-      }, 300)
     }
-  }, [ls.data?.body?.students])
+  }, [ls.data?.body?.students, ls.data?.body?.studentReactions])
   
   // Эффект для сброса флага "новизны" студентов
   useEffect(() => {