Speed up animations throughout the panel

Author: DaneEveritt

resources/scripts/TransitionRouter.tsx

@@ -17,7 +17,7 @@ const TransitionRouter: React.FC = ({ children }) => (
     <Route
         render={({ location }) => (
             <StyledSwitchTransition>
-                <Fade timeout={250} key={location.key} in appear unmountOnExit>
+                <Fade timeout={150} key={location.key} in appear unmountOnExit>
                     <section>
                         {children}
                     </section>

resources/scripts/components/dashboard/search/SearchModal.tsx

@@ -22,8 +22,7 @@ interface Values {
 }
 
 const ServerResult = styled(Link)`
-    ${tw`flex items-center bg-neutral-900 p-4 rounded border-l-4 border-neutral-900 no-underline`};
-    transition: all 250ms linear;
+    ${tw`flex items-center bg-neutral-900 p-4 rounded border-l-4 border-neutral-900 no-underline transition-all duration-150`};
 
     &:hover {
         ${tw`shadow border-cyan-500`};

resources/scripts/components/elements/DropdownMenu.tsx

@@ -61,7 +61,7 @@ const DropdownMenu = ({ renderToggle, children }: Props) => {
     return (
         <div>
             {renderToggle(onClickHandler)}
-            <Fade timeout={250} in={visible} unmountOnExit>
+            <Fade timeout={150} in={visible} unmountOnExit>
                 <div
                     ref={menu}
                     onClick={e => {

resources/scripts/components/elements/InputSpinner.tsx

@@ -9,7 +9,7 @@ const InputSpinner = ({ visible, children }: { visible: boolean, children: React
             appear
             unmountOnExit
             in={visible}
-            timeout={250}
+            timeout={150}
         >
             <div css={tw`absolute right-0 h-full flex items-center justify-end pr-3`}>
                 <Spinner size={'small'}/>

resources/scripts/components/elements/Modal.tsx

@@ -62,7 +62,7 @@ const Modal: React.FC<Props> = ({ visible, appear, dismissable, showSpinnerOverl
     }, [ render ]);
 
     return (
-        <Fade timeout={250} appear={appear} in={render} unmountOnExit onExited={onDismissed}>
+        <Fade timeout={150} appear={appear} in={render} unmountOnExit onExited={onDismissed}>
             <ModalMask
                 onClick={e => {
                     if (isDismissable && closeOnBackground) {
@@ -87,7 +87,7 @@ const Modal: React.FC<Props> = ({ visible, appear, dismissable, showSpinnerOverl
                         <Spinner/>
                     </div>
                     }
-                    <div css={tw`bg-neutral-800 p-6 rounded shadow-md overflow-y-scroll transition-all duration-250`}>
+                    <div css={tw`bg-neutral-800 p-6 rounded shadow-md overflow-y-scroll transition-all duration-150`}>
                         {children}
                     </div>
                 </ModalContainer>

resources/scripts/components/elements/PageContentBlock.tsx

@@ -4,7 +4,7 @@ import { CSSTransition } from 'react-transition-group';
 import tw from 'twin.macro';
 
 const PageContentBlock: React.FC<{ className?: string }> = ({ children, className }) => (
-    <CSSTransition timeout={250} classNames={'fade'} appear in>
+    <CSSTransition timeout={150} classNames={'fade'} appear in>
         <>
             <ContentContainer css={tw`my-10`} className={className}>
                 {children}

resources/scripts/components/elements/ProgressBar.tsx

@@ -61,7 +61,7 @@ export default () => {
     return (
         <div className={'w-full fixed'} style={{ height: '2px' }}>
             <CSSTransition
-                timeout={250}
+                timeout={150}
                 appear
                 in={visible}
                 unmountOnExit

resources/scripts/components/server/WebsocketHandler.tsx

@@ -67,7 +67,7 @@ export default () => {
 
     return (
         error ?
-            <CSSTransition timeout={250} in appear classNames={'fade'}>
+            <CSSTransition timeout={150} in appear classNames={'fade'}>
                 <div css={tw`bg-red-500 py-2`}>
                     <ContentContainer css={tw`flex items-center justify-center`}>
                         <Spinner size={'small'}/>

resources/scripts/components/server/databases/DatabasesContainer.tsx

@@ -40,7 +40,7 @@ export default () => {
             {(!databases.length && loading) ?
                 <Spinner size={'large'} centered/>
                 :
-                <Fade timeout={250}>
+                <Fade timeout={150}>
                     <>
                         {databases.length > 0 ?
                             databases.map((database, index) => (

resources/scripts/components/server/files/FileDropdownMenu.tsx

@@ -138,7 +138,7 @@ export default ({ uuid }: { uuid: string }) => {
                 />
                 <SpinnerOverlay visible={showSpinner} fixed size={'large'}/>
             </div>
-            <Fade timeout={250} in={menuVisible} unmountOnExit classNames={'fade'}>
+            <Fade timeout={150} in={menuVisible} unmountOnExit classNames={'fade'}>
                 <div
                     ref={menu}
                     onClick={e => {