From f144ba8394b804c11c848c8b61407bd54a88f51d Mon Sep 17 00:00:00 2001
From: Dane Everitt <dane@daneeveritt.com>
Date: Wed, 19 Aug 2020 21:30:45 -0700
Subject: [PATCH] =?UTF-8?q?Don't=20enter=20=E2=9C=A8=20d=20i=20s=20c=20o?=
 =?UTF-8?q?=20=20=20m=20o=20d=20e=20=E2=9C=A8when=20first=20opening=20the?=
 =?UTF-8?q?=20page;=20closes=20#2190?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This was caused by the location.key being undefined when the page first renders (for some reason), and therefore the fade component just kept re-rendering since it wasn't using a unique key.
---
 resources/scripts/TransitionRouter.tsx | 33 +++++++++++++++-----------
 1 file changed, 19 insertions(+), 14 deletions(-)

diff --git a/resources/scripts/TransitionRouter.tsx b/resources/scripts/TransitionRouter.tsx
index 227f7dcdc..342e31a7a 100644
--- a/resources/scripts/TransitionRouter.tsx
+++ b/resources/scripts/TransitionRouter.tsx
@@ -1,9 +1,10 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import { Route } from 'react-router';
 import { SwitchTransition } from 'react-transition-group';
 import Fade from '@/components/elements/Fade';
 import styled from 'styled-components/macro';
 import tw from 'twin.macro';
+import v4 from 'uuid/v4';
 
 const StyledSwitchTransition = styled(SwitchTransition)`
     ${tw`relative`};
@@ -13,18 +14,22 @@ const StyledSwitchTransition = styled(SwitchTransition)`
     }
 `;
 
-const TransitionRouter: React.FC = ({ children }) => (
-    <Route
-        render={({ location }) => (
-            <StyledSwitchTransition>
-                <Fade timeout={150} key={location.key} in appear unmountOnExit>
-                    <section>
-                        {children}
-                    </section>
-                </Fade>
-            </StyledSwitchTransition>
-        )}
-    />
-);
+const TransitionRouter: React.FC = ({ children }) => {
+    const uuid = useRef(v4()).current;
+
+    return (
+        <Route
+            render={({ location }) => (
+                <StyledSwitchTransition>
+                    <Fade timeout={150} key={location.key || uuid} in appear unmountOnExit>
+                        <section>
+                            {children}
+                        </section>
+                    </Fade>
+                </StyledSwitchTransition>
+            )}
+        />
+    );
+};
 
 export default TransitionRouter;