From 3d1e06deb15a9f754db688b8f8569959b40a86c1 Mon Sep 17 00:00:00 2001
From: lonkaars <loek@pipeframe.xyz>
Date: Sat, 26 Jun 2021 12:43:53 +0200
Subject: settings adjust based on selection

---
 components/fadethrough.tsx | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

(limited to 'components')

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>;
 }
-- 
cgit v1.2.3