From 73246693223e09d78345c33d6d7d0afc9609761b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tao=20Bror=20Bojl=C3=A9n?= <tao@btao.org>
Date: Fri, 2 Aug 2019 23:12:34 +0300
Subject: [PATCH] don't load graph till it's viewed

---
 CHANGELOG.md                                  |  2 ++
 .../src/components/screens/GraphScreen.tsx    | 29 +++++++++++++++++--
 2 files changed, 29 insertions(+), 2 deletions(-)

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<IGraphScreenProps> {
+class GraphScreenImpl extends React.Component<IGraphScreenProps, IGraphScreenState> {
+  public constructor(props: IGraphScreenProps) {
+    super(props);
+    this.state = { hasBeenViewed: false };
+  }
+
   public render() {
     return <Route render={this.renderRoutes} />;
   }
 
   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) => (
     <FullDiv>
       <GraphContainer>
         {/* Smaller screens never load the entire graph. Instead, `InstanceScreen` shows only the neighborhood. */}
-        {isSmallScreen || <Graph />}
+        {isSmallScreen || !this.state.hasBeenViewed || <Graph />}
         <SidebarContainer>
           <Switch>
             <Route path={INSTANCE_DOMAIN_PATH} component={InstanceScreen} />