Done

src/App.tsx

@@ -24,7 +24,6 @@ export const App: React.FC = () => {
   const [isInputDisabled, setIsInputDisabled] = useState(false);
   const [isToggleAllActive, setIsToggleAllActive] = useState(false);
   const [query, setQuery] = useState('');
-  const [isLoading, setIsLoading] = useState(false);
   const inputRef = useRef<HTMLInputElement | null>(null);
 
   useEffect(() => {
@@ -187,17 +186,18 @@ export const App: React.FC = () => {
   };
 
   const handleRenamingTodo = (renamedTodo: Todo) => {
-    setIsLoading(true);
-    updateTodos(renamedTodo)
+    setCurrentTodoIds([...currentTodoIds, renamedTodo.id]);
+
+    return updateTodos(renamedTodo)
       .then(() => {
-        setTodos(currentTodos =>
-          currentTodos.map(todo =>
+        setTodos(prevTodos =>
+          prevTodos.map(todo =>
             todo.id === renamedTodo.id ? renamedTodo : todo,
           ),
         );
       })
       .catch(() => setError(ErrorMessage.UpdateTodo))
-      .finally(() => setIsLoading(false));
+      .finally(() => setCurrentTodoIds([]));
   };
 
   if (!USER_ID) {
@@ -228,7 +228,7 @@ export const App: React.FC = () => {
               todo={todo}
               onToggleStatus={toggleTodoStatus}
               handleDeleteTodo={handleDeleteTodo}
-              isLoading={currentTodoIds.includes(todo.id) || isLoading}
+              isLoading={currentTodoIds.includes(todo.id)}
               onRenamingTodo={handleRenamingTodo}
             />
           ))}

src/components/TodoItem/TodoItem.tsx

@@ -7,11 +7,11 @@ type Props = {
   onToggleStatus: (v: Todo) => void;
   handleDeleteTodo: (v: number) => void;
   isLoading: boolean;
-  onRenamingTodo: (v: Todo) => void;
+  onRenamingTodo: (v: Todo) => Promise<void>;
 };
 
 export const TodoItem: React.FC<Props> = ({
-  todo: todoItem, // змінив ім'я параметра
+  todo: todoItem,
   onToggleStatus,
   handleDeleteTodo,
   isLoading,
@@ -42,7 +42,7 @@ export const TodoItem: React.FC<Props> = ({
     const trimmedTitle = renamedTodo.trim();
 
     if (trimmedTitle === todoItem.title) {
-      setIsEditing(false); // Залишити закритим, якщо нічого не змінилося
+      setIsEditing(false);
 
       return;
     }
@@ -53,14 +53,10 @@ export const TodoItem: React.FC<Props> = ({
       return;
     }
 
-    // Викликаємо onRenamingTodo без .catch(), якщо це не асинхронна функція
     onRenamingTodo({
       ...todoItem,
       title: trimmedTitle,
-    });
-
-    // Якщо редагування успішне, закриваємо форму
-    setIsEditing(false);
+    }).finally(() => setIsEditing(false));
   };
 
   return (