chore: disable animations when running in integrationTests

stylesheets/_session_constants.scss

@@ -153,7 +153,6 @@ $session-margin-md: 15px;
 $session-margin-lg: 20px;
 
 // Animations
-$session-transition-duration: 0.25s;
 
 @keyframes fadein {
   from {

stylesheets/_session_slider.scss

@@ -172,13 +172,13 @@
 }
 .rc-slider-tooltip-zoom-down-enter,
 .rc-slider-tooltip-zoom-down-appear {
-  animation-duration: 0.3s;
+  animation-duration: var(--default-duration);
   animation-fill-mode: both;
   display: block !important;
   animation-play-state: paused;
 }
 .rc-slider-tooltip-zoom-down-leave {
-  animation-duration: 0.3s;
+  animation-duration: var(--default-duration);
   animation-fill-mode: both;
   display: block !important;
   animation-play-state: paused;

ts/components/calling/CallButtons.tsx

@@ -355,7 +355,7 @@ const StyledCallWindowControls = styled.div<{ isFullScreen: boolean; makeVisible
   margin-right: auto;
   left: 0;
   right: 0;
-  transition: all 0.25s ease-in-out;
+  transition: all var(--default-duration) ease-in-out;
 
   display: flex;
   justify-content: center;

ts/components/conversation/composition/UserMentions.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { SuggestionDataItem } from 'react-mentions';
-import { MemberListItem } from '../../MemberListItem';
 import { HTMLDirection } from '../../../util/i18n';
+import { MemberListItem } from '../../MemberListItem';
 
 const listRTLStyle = { position: 'absolute', bottom: '0px', right: '100%' };
 
@@ -21,7 +21,7 @@ export const styleForCompositionBoxSuggestions = (dir: HTMLDirection = 'ltr') =>
         paddingBottom: '5px',
         backgroundColor: 'var(--suggestions-background-color)',
         color: 'var(--suggestions-text-color)',
-        transition: '0.25s',
+        transition: 'var(--default-duration)',
 
         '&focused': {
           backgroundColor: 'var(--suggestions-background-hover-color)',

ts/components/conversation/right-panel/RightPanel.tsx

@@ -13,7 +13,7 @@ export const StyledRightPanelContainer = styled.div`
   height: var(--right-panel-height);
   right: 0vw;
 
-  transition: transform 0.3s ease-in-out;
+  transition: transform var(--default-duration) ease-in-out;
   transform: translateX(100%);
   will-change: transform;
   width: var(--right-panel-width);
@@ -25,7 +25,7 @@ export const StyledRightPanelContainer = styled.div`
 
   &.show {
     transform: none;
-    transition: transform 0.3s ease-in-out;
+    transition: transform var(--default-duration) ease-in-out;
     z-index: 3;
     visibility: visible;
   }

ts/components/leftpane/LeftPaneSectionHeader.tsx

@@ -28,7 +28,7 @@ const StyledProgressBarContainer = styled.div`
 const StyledProgressBarInner = styled.div`
   background: var(--primary-color);
   width: 90%;
-  transition: width 0.5s ease-in;
+  transition: width var(--default-duration) ease-in;
   height: 100%;
 `;
 

ts/components/leftpane/overlay/choose-action/OverlayChooseAction.tsx

@@ -14,7 +14,7 @@ const StyledActionRow = styled.button`
   display: flex;
   align-items: center;
   border-bottom: 1px var(--border-color) solid;
-  transition-duration: 0.25s;
+  transition-duration: var(--default-duration);
   width: 100%;
 
   &:first-child {

ts/themes/globals.tsx

@@ -1,3 +1,4 @@
+import { isTestIntegration } from '../shared/env_vars';
 import { hexColorToRGB } from '../util/hexColorToRGB';
 import { COLORS } from './constants/colors';
 
@@ -126,7 +127,7 @@ export const THEME_GLOBALS: ThemeGlobals = {
   '--composition-container-height': '60px',
   '--search-input-height': '34px',
 
-  '--default-duration': '0.25s',
+  '--default-duration': isTestIntegration() ? '0s' : '0.25s',
 
   '--green-color': COLORS.PRIMARY.GREEN,
   '--blue-color': COLORS.PRIMARY.BLUE,