X-Git-Url: https://git.arvados.org/arvados.git/blobdiff_plain/dc16046dbfdca4a9c0d94971730d220b27e80620..5dc33e1aa270135952f7f78a06757579ec20eac0:/services/workbench2/src/store/details-panel/details-panel-action.ts

diff --git a/services/workbench2/src/store/details-panel/details-panel-action.ts b/services/workbench2/src/store/details-panel/details-panel-action.ts
index b708ad622c..e14c70ace7 100644
--- a/services/workbench2/src/store/details-panel/details-panel-action.ts
+++ b/services/workbench2/src/store/details-panel/details-panel-action.ts
@@ -19,7 +19,9 @@ export const SLIDE_TIMEOUT = 500;
 export const detailsPanelActions = unionize({
     TOGGLE_DETAILS_PANEL: ofType<{}>(),
     OPEN_DETAILS_PANEL: ofType<number>(),
-    LOAD_DETAILS_PANEL: ofType<string>()
+    LOAD_DETAILS_PANEL: ofType<string>(),
+    START_TRANSITION: ofType<{}>(),
+    END_TRANSITION: ofType<{}>(),
 });
 
 export type DetailsPanelAction = UnionOf<typeof detailsPanelActions>;
@@ -41,6 +43,7 @@ export const loadDetailsPanel = (uuid: string) =>
 
 export const openDetailsPanel = (uuid?: string, tabNr: number = 0) =>
     (dispatch: Dispatch) => {
+        startDetailsPanelTransition(dispatch)
         dispatch(detailsPanelActions.OPEN_DETAILS_PANEL(tabNr));
         if (uuid !== undefined) {
             dispatch<any>(loadDetailsPanel(uuid));
@@ -69,8 +72,16 @@ export const toggleDetailsPanel = () => (dispatch: Dispatch, getState: () => Roo
     setTimeout(() => {
         window.dispatchEvent(new Event('resize'));
     }, SLIDE_TIMEOUT);
+    startDetailsPanelTransition(dispatch)
     dispatch(detailsPanelActions.TOGGLE_DETAILS_PANEL());
     if (getState().detailsPanel.isOpened) {
         dispatch<any>(loadDetailsPanel(getState().detailsPanel.resourceUuid));
     }
 };
+
+const startDetailsPanelTransition = (dispatch) => {
+        dispatch(detailsPanelActions.START_TRANSITION())
+    setTimeout(() => {
+        dispatch(detailsPanelActions.END_TRANSITION())
+    }, SLIDE_TIMEOUT);
+}
\ No newline at end of file