From 28992c5e43aefb494284e8467de45daecfbe6e30 Mon Sep 17 00:00:00 2001
From: Dane Everitt <dane@daneeveritt.com>
Date: Sun, 5 Jul 2020 13:56:04 -0700
Subject: [PATCH] Speed up animations throughout the panel

---
 resources/scripts/TransitionRouter.tsx                        | 2 +-
 resources/scripts/components/dashboard/search/SearchModal.tsx | 3 +--
 resources/scripts/components/elements/DropdownMenu.tsx        | 2 +-
 resources/scripts/components/elements/InputSpinner.tsx        | 2 +-
 resources/scripts/components/elements/Modal.tsx               | 4 ++--
 resources/scripts/components/elements/PageContentBlock.tsx    | 2 +-
 resources/scripts/components/elements/ProgressBar.tsx         | 2 +-
 resources/scripts/components/server/WebsocketHandler.tsx      | 2 +-
 .../components/server/databases/DatabasesContainer.tsx        | 2 +-
 .../scripts/components/server/files/FileDropdownMenu.tsx      | 2 +-
 .../scripts/components/server/files/FileManagerContainer.tsx  | 2 +-
 resources/scripts/routers/ServerRouter.tsx                    | 2 +-
 12 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/resources/scripts/TransitionRouter.tsx b/resources/scripts/TransitionRouter.tsx
index 19c06d43a..227f7dcdc 100644
--- a/resources/scripts/TransitionRouter.tsx
+++ b/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>
diff --git a/resources/scripts/components/dashboard/search/SearchModal.tsx b/resources/scripts/components/dashboard/search/SearchModal.tsx
index e58900694..8cdfb1b7f 100644
--- a/resources/scripts/components/dashboard/search/SearchModal.tsx
+++ b/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`};
diff --git a/resources/scripts/components/elements/DropdownMenu.tsx b/resources/scripts/components/elements/DropdownMenu.tsx
index 8637fa8ec..05b3d3c7c 100644
--- a/resources/scripts/components/elements/DropdownMenu.tsx
+++ b/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 => {
diff --git a/resources/scripts/components/elements/InputSpinner.tsx b/resources/scripts/components/elements/InputSpinner.tsx
index d1273435f..ce4843dff 100644
--- a/resources/scripts/components/elements/InputSpinner.tsx
+++ b/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'}/>
diff --git a/resources/scripts/components/elements/Modal.tsx b/resources/scripts/components/elements/Modal.tsx
index 672333ecf..f242fbacc 100644
--- a/resources/scripts/components/elements/Modal.tsx
+++ b/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>
diff --git a/resources/scripts/components/elements/PageContentBlock.tsx b/resources/scripts/components/elements/PageContentBlock.tsx
index 6613b6e51..9503839ff 100644
--- a/resources/scripts/components/elements/PageContentBlock.tsx
+++ b/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}
diff --git a/resources/scripts/components/elements/ProgressBar.tsx b/resources/scripts/components/elements/ProgressBar.tsx
index a40b92705..64ee732b7 100644
--- a/resources/scripts/components/elements/ProgressBar.tsx
+++ b/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
diff --git a/resources/scripts/components/server/WebsocketHandler.tsx b/resources/scripts/components/server/WebsocketHandler.tsx
index b2dd6e84e..fe43e56d5 100644
--- a/resources/scripts/components/server/WebsocketHandler.tsx
+++ b/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'}/>
diff --git a/resources/scripts/components/server/databases/DatabasesContainer.tsx b/resources/scripts/components/server/databases/DatabasesContainer.tsx
index 164f2edef..486072598 100644
--- a/resources/scripts/components/server/databases/DatabasesContainer.tsx
+++ b/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) => (
diff --git a/resources/scripts/components/server/files/FileDropdownMenu.tsx b/resources/scripts/components/server/files/FileDropdownMenu.tsx
index 53b817d0e..a1953470b 100644
--- a/resources/scripts/components/server/files/FileDropdownMenu.tsx
+++ b/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 => {
diff --git a/resources/scripts/components/server/files/FileManagerContainer.tsx b/resources/scripts/components/server/files/FileManagerContainer.tsx
index ea5b16573..e97bb37f0 100644
--- a/resources/scripts/components/server/files/FileManagerContainer.tsx
+++ b/resources/scripts/components/server/files/FileManagerContainer.tsx
@@ -70,7 +70,7 @@ export default () => {
                                     This directory seems to be empty.
                                 </p>
                                 :
-                                <CSSTransition classNames={'fade'} timeout={250} appear in>
+                                <CSSTransition classNames={'fade'} timeout={150} appear in>
                                     <React.Fragment>
                                         <div>
                                             {files.length > 250 ?
diff --git a/resources/scripts/routers/ServerRouter.tsx b/resources/scripts/routers/ServerRouter.tsx
index cf4cbec8a..baa9723a4 100644
--- a/resources/scripts/routers/ServerRouter.tsx
+++ b/resources/scripts/routers/ServerRouter.tsx
@@ -69,7 +69,7 @@ const ServerRouter = ({ match, location }: RouteComponentProps<{ id: string }>)
                     <Spinner size={'large'} centered/>
                 :
                 <>
-                    <CSSTransition timeout={250} classNames={'fade'} appear in>
+                    <CSSTransition timeout={150} classNames={'fade'} appear in>
                         <SubNavigation>
                             <div>
                                 <NavLink to={`${match.url}`} exact>Console</NavLink>