settings adjust based on selection

1 files changed, 10 insertions, 6 deletions

diff --git a/components/fadethrough.tsx b/components/fadethrough.tsx
index 5f5d06c..e3af4d3 100644
--- a/components/fadethrough.tsx
+++ b/components/fadethrough.tsx
@@ -1,18 +1,22 @@
-import Fade from '@material-ui/core/Fade';
 import Grow from '@material-ui/core/Grow';
-import { ReactNode } from 'react';
+import { ReactNode, useEffect, useState } from 'react';
 
 export default function FadeThroughTransition(props: {
 	from: ReactNode;
 	to: ReactNode;
 	show: boolean;
 }) {
+	var [firstRender, setFirstRender] = useState(true);
+	useEffect(() => {
+		setTimeout(() => setFirstRender(false), 0);
+	}, []);
+
 	return <div className='posabs a0 fadethrough'>
-		<Grow in={props.show} timeout={500}>
+		<div className={'fadeout ' + (firstRender ? 'first' : '')}>
+			<div className='posabs a0 from'>{props.from}</div>
+		</div>
+		<Grow in={props.show} timeout={300}>
 			<div className='posabs a0 to'>{props.to}</div>
 		</Grow>
-		<Fade in={!props.show}>
-			<div className='posabs a0 from'>{props.from}</div>
-		</Fade>
 	</div>;
 }