Don't enter ✨ d i s c o m o d e ✨when first opening the page; closes #2190

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

@@ -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 }) => (
+const TransitionRouter: React.FC = ({ children }) => {
-    <Route
+    const uuid = useRef(v4()).current;
-        render={({ location }) => (
+
-            <StyledSwitchTransition>
+    return (
-                <Fade timeout={150} key={location.key} in appear unmountOnExit>
+        <Route
-                    <section>
+            render={({ location }) => (
-                        {children}
+                <StyledSwitchTransition>
-                    </section>
+                    <Fade timeout={150} key={location.key || uuid} in appear unmountOnExit>
-                </Fade>
+                        <section>
-            </StyledSwitchTransition>
+                            {children}
-        )}
+                        </section>
-    />
+                    </Fade>
-);
+                </StyledSwitchTransition>
+            )}
+        />
+    );
+};
 
 export default TransitionRouter;