From c68eb61f627e1975e6d4c49ed029c64eb4413a7b Mon Sep 17 00:00:00 2001
From: Alexey Plutalov <demiazz.py@gmail.com>
Date: Fri, 22 Dec 2023 15:50:15 +0300
Subject: [PATCH] fix(ui-layout-view): use transition events instead of timeout
 fallback

---
 .../ui-layout-view/src/UiLayoutView.const.ts      |  1 -
 components/ui-layout-view/src/UiLayoutView.tsx    | 15 ++++++++-------
 2 files changed, 8 insertions(+), 8 deletions(-)
 delete mode 100644 components/ui-layout-view/src/UiLayoutView.const.ts

diff --git a/components/ui-layout-view/src/UiLayoutView.const.ts b/components/ui-layout-view/src/UiLayoutView.const.ts
deleted file mode 100644
index 523d927c..00000000
--- a/components/ui-layout-view/src/UiLayoutView.const.ts
+++ /dev/null
@@ -1 +0,0 @@
-export const DURATION = 150;
diff --git a/components/ui-layout-view/src/UiLayoutView.tsx b/components/ui-layout-view/src/UiLayoutView.tsx
index fec25b68..9a1d9527 100644
--- a/components/ui-layout-view/src/UiLayoutView.tsx
+++ b/components/ui-layout-view/src/UiLayoutView.tsx
@@ -5,9 +5,12 @@ import { CSSTransition } from 'react-transition-group';
 
 import { container, leftSidebarStates, panels, rightSidebarStates, root } from './UiLayoutView.css';
 
-import { DURATION } from './UiLayoutView.const';
 import { Props } from './UiLayoutView.types';
 
+const endListener = (node: HTMLElement, done: () => void) => {
+  node.addEventListener('transitionend', done, false);
+};
+
 export function UiLayoutView({
   rootClassName,
   bodyClassName,
@@ -26,16 +29,14 @@ export function UiLayoutView({
   return (
     <div className={clsx(root, rootClassName)} ref={forwardedRef}>
       <CSSTransition
-        in={isLeftSidebarVisible}
-        timeout={DURATION}
+        addEndListener={endListener}
         classNames={leftSidebarStates}
-        nodeRef={ref}
+        in={isLeftSidebarVisible}
       >
         <CSSTransition
-          in={isRightSidebarVisible}
-          timeout={DURATION}
+          addEndListener={endListener}
           classNames={rightSidebarStates}
-          nodeRef={ref}
+          in={isRightSidebarVisible}
         >
           <div ref={ref} className={clsx(container)}>
             {hasLeftSidebar && (