Skip to content

Commit f144ba8

Browse files
committed
Don't enter ✨ d i s c o m o d e ✨when first opening the page; closes pterodactyl#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.
1 parent 13ace83 commit f144ba8

File tree

1 file changed

+19
-14
lines changed

1 file changed

+19
-14
lines changed
Lines changed: 19 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
1-
import React from 'react';
1+
import React, { useRef } from 'react';
22
import { Route } from 'react-router';
33
import { SwitchTransition } from 'react-transition-group';
44
import Fade from '@/components/elements/Fade';
55
import styled from 'styled-components/macro';
66
import tw from 'twin.macro';
7+
import v4 from 'uuid/v4';
78

89
const StyledSwitchTransition = styled(SwitchTransition)`
910
${tw`relative`};
@@ -13,18 +14,22 @@ const StyledSwitchTransition = styled(SwitchTransition)`
1314
}
1415
`;
1516

16-
const TransitionRouter: React.FC = ({ children }) => (
17-
<Route
18-
render={({ location }) => (
19-
<StyledSwitchTransition>
20-
<Fade timeout={150} key={location.key} in appear unmountOnExit>
21-
<section>
22-
{children}
23-
</section>
24-
</Fade>
25-
</StyledSwitchTransition>
26-
)}
27-
/>
28-
);
17+
const TransitionRouter: React.FC = ({ children }) => {
18+
const uuid = useRef(v4()).current;
19+
20+
return (
21+
<Route
22+
render={({ location }) => (
23+
<StyledSwitchTransition>
24+
<Fade timeout={150} key={location.key || uuid} in appear unmountOnExit>
25+
<section>
26+
{children}
27+
</section>
28+
</Fade>
29+
</StyledSwitchTransition>
30+
)}
31+
/>
32+
);
33+
};
2934

3035
export default TransitionRouter;

0 commit comments

Comments
 (0)