diff --git a/CHANGELOG.md b/CHANGELOG.md index d45b4f0..be8d4f6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -13,6 +13,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Changed +- Performance improvements when opening the app on something that isn't the graph. + ### Deprecated ### Removed diff --git a/frontend/src/components/screens/GraphScreen.tsx b/frontend/src/components/screens/GraphScreen.tsx index 5342e34..ed22e73 100644 --- a/frontend/src/components/screens/GraphScreen.tsx +++ b/frontend/src/components/screens/GraphScreen.tsx @@ -30,28 +30,53 @@ interface IGraphScreenProps extends RouteComponentProps { graphLoadError: boolean; loadInstance: (domain: string | null) => void; } +interface IGraphScreenState { + hasBeenViewed: boolean; +} /** * This component takes care of loading or deselecting the current instance when the URL path changes. * It also handles changing and animating the screen shown in the sidebar. + * + * state.hasBeenViewed is used because once the component with the graph has been mounted, we never want to unmount it. + * However, if it's not the first page viewed (e.g. if someone opens directly on /about) we don't want to render the + * graph since it slows down everything else! */ -class GraphScreenImpl extends React.Component { +class GraphScreenImpl extends React.Component { + public constructor(props: IGraphScreenProps) { + super(props); + this.state = { hasBeenViewed: false }; + } + public render() { return ; } public componentDidMount() { + this.setHasBeenViewed(); this.loadCurrentInstance(); } public componentDidUpdate(prevProps: IGraphScreenProps) { + this.setHasBeenViewed(); this.loadCurrentInstance(prevProps.currentInstanceName); } + private setHasBeenViewed = () => { + if (this.state.hasBeenViewed) { + return; + } + + const { location } = this.props; + if (location.pathname.startsWith("/instance") || location.pathname === "/") { + this.setState({ hasBeenViewed: true }); + } + }; + private renderRoutes = ({ location }: RouteComponentProps) => ( {/* Smaller screens never load the entire graph. Instead, `InstanceScreen` shows only the neighborhood. */} - {isSmallScreen || } + {isSmallScreen || !this.state.hasBeenViewed || }