Skynet/misc_pterodactyl-panel
6
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source 
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.
This commit is contained in:
Dane Everitt 2020-08-19 21:30:45 -07:00
parent 13ace83f42
commit f144ba8394
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
1 changed files with 19 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
resources/scripts/TransitionRouter.tsx
View file

@ -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;