Fix route transitioning

resources/scripts/TransitionRouter.tsx

@@ -1,17 +1,28 @@
 import React from 'react';
 import { Route } from 'react-router';
-import { CSSTransition, TransitionGroup } from 'react-transition-group';
+import { SwitchTransition } from 'react-transition-group';
+import Fade from '@/components/elements/Fade';
+import styled from 'styled-components/macro';
+import tw from 'twin.macro';
+
+const StyledSwitchTransition = styled(SwitchTransition)`
+    ${tw`relative`};
+    
+    & section {
+        ${tw`absolute w-full top-0 left-0`};
+    }
+`;
 
 const TransitionRouter: React.FC = ({ children }) => (
     <Route
         render={({ location }) => (
-            <TransitionGroup className={'route-transition-group'}>
-                <CSSTransition key={location.key} timeout={250} in appear classNames={'fade'}>
+            <StyledSwitchTransition>
+                <Fade timeout={250} key={location.key} in appear unmountOnExit>
                     <section>
                         {children}
                     </section>
-                </CSSTransition>
-            </TransitionGroup>
+                </Fade>
+            </StyledSwitchTransition>
         )}
     />
 );

resources/scripts/components/App.tsx

@@ -12,6 +12,7 @@ import ProgressBar from '@/components/elements/ProgressBar';
 import NotFound from '@/components/screens/NotFound';
 import tw from 'twin.macro';
 import GlobalStylesheet from '@/assets/css/GlobalStylesheet';
+import TransitionRouter from '@/TransitionRouter';
 
 interface ExtendedWindow extends Window {
     SiteConfiguration?: SiteSettings;

resources/scripts/components/elements/Fade.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import tw from 'twin.macro';
+import styled from 'styled-components/macro';
+import CSSTransition, { CSSTransitionProps } from 'react-transition-group/CSSTransition';
+
+interface Props extends Omit<CSSTransitionProps, 'timeout' | 'classNames'> {
+    timeout: number;
+}
+
+const Container = styled.div<{ timeout: number }>`
+    .fade-enter, .fade-exit {
+        will-change: opacity;
+    }
+    
+    .fade-enter {
+        ${tw`opacity-0`};
+        
+        &.fade-enter-active {
+            ${tw`opacity-100 transition-opacity ease-in`};
+            transition-duration: ${props => props.timeout}ms;
+        }
+    }
+    
+    .fade-exit {
+        ${tw`opacity-100`};
+        
+        &.fade-exit-active {
+            ${tw`opacity-0 transition-opacity ease-in`};
+            transition-duration: ${props => props.timeout}ms;
+        }
+    }
+`;
+
+const Fade: React.FC<Props> = ({ timeout, children, ...props }) => (
+    <Container timeout={timeout}>
+        <CSSTransition timeout={timeout} classNames={'fade'} {...props}>
+            {children}
+        </CSSTransition>
+    </Container>
+);
+Fade.displayName = 'Fade';
+
+export default Fade;

resources/scripts/routers/DashboardRouter.tsx

@@ -3,12 +3,12 @@ import { NavLink, Route, RouteComponentProps, Switch } from 'react-router-dom';
 import AccountOverviewContainer from '@/components/dashboard/AccountOverviewContainer';
 import NavigationBar from '@/components/NavigationBar';
 import DashboardContainer from '@/components/dashboard/DashboardContainer';
-import TransitionRouter from '@/TransitionRouter';
 import AccountApiContainer from '@/components/dashboard/AccountApiContainer';
 import NotFound from '@/components/screens/NotFound';
 import styled from 'styled-components/macro';
 import tw from 'twin.macro';
 import config from '@/../../tailwind.config.js';
+import TransitionRouter from '@/TransitionRouter';
 
 const SubNavigation = styled.div`
     ${tw`w-full bg-neutral-700 shadow`};