feat: render HexapodPlot ASAP, but hide it if not needed

mithi · Jul 7, 2020 · 429a4a9 · 429a4a9
1 parent f0c087e
commit 429a4a9
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 56 deletions.
diff --git a/src/components/HexapodPlot.js b/src/components/HexapodPlot.js
@@ -38,21 +38,17 @@ export const HexapodPlot = ({ data, layout, onRelayout, revision, promise }) =>
 
     if (error) {
         return (
-            <div>
+            <>
                 <h2>Error Loading Plotly</h2>
                 <button className="button" onClick={loader}>
                     Retry
                 </button>
-            </div>
+            </>
         )
     }
 
     if (!ready) {
-        return (
-            <div ref={loadingRef}>
-                <h2>Loading...</h2>
-            </div>
-        )
+        return <h2 ref={loadingRef}>Loading...</h2>
     }
 
     const Plot = ref.current

diff --git a/src/loadables.js b/src/loadables.js
@@ -30,7 +30,7 @@ const LazyHexapodPlot = lazy(() =>
     )
 )
 
-const Fallback = () => <h2>Loading...</h2>
+const Fallback = () => null
 
 export function SuspenseLandingPage(props) {
     return (

diff --git a/src/routes.js b/src/routes.js
@@ -1,5 +1,5 @@
 import React from "react"
-import { Route, Switch } from "react-router-dom"
+import { Route, Switch, useRouteMatch } from "react-router-dom"
 import { HEXAPOD_LINK_PATHS, PATHS } from "./components/vars"
 
 import { PoseTable, NavDetailed, DimensionsWidget, AlertBox } from "./components"
@@ -28,65 +28,69 @@ export const Routes = ({
     updatePatternPose,
     updateDimensions,
     onRelayout,
-}) => (
-    <>
-        <div className="main content">
-            <div className="sidebar column-container cell">
-                <Route path={HEXAPOD_LINK_PATHS} exact>
-                    <DimensionsWidget
-                        params={{
-                            dimensions: hexapodParams.dimensions,
-                        }}
-                        onUpdate={updateDimensions}
-                    />
-                </Route>
-                <Switch>
-                    <Route path="/" exact>
-                        <SuspenseLandingPage onMount={onPageLoad} />
-                    </Route>
-                    <Route path={PATHS.forwardKinematics.path}>
-                        <SuspenseForwardKinematicsPage
-                            params={{ pose: hexapodParams.pose }}
-                            onUpdate={updatePose}
-                            onMount={onPageLoad}
-                        />
-                    </Route>
-                    <Route path={PATHS.inverseKinematics.path}>
-                        <SuspenseInverseKinematicsPage
+}) => {
+    const { path } = useRouteMatch()
+    return (
+        <>
+            <div className="main content">
+                <div className="sidebar column-container cell">
+                    <Route path={HEXAPOD_LINK_PATHS} exact>
+                        <DimensionsWidget
                             params={{
                                 dimensions: hexapodParams.dimensions,
-                                ikParams: ikParams,
                             }}
-                            onUpdate={updateIkParams}
-                            onMount={onPageLoad}
-                        />
-                    </Route>
-                    <Route path={PATHS.legPatterns.path}>
-                        <SuspenseLegPatternPage
-                            params={{ patternParams: patternParams }}
-                            onUpdate={updatePatternPose}
-                            onMount={onPageLoad}
+                            onUpdate={updateDimensions}
                         />
                     </Route>
-                </Switch>
-                <PoseTable pose={hexapodParams.pose} showPoseTable={showPoseMessage} />
-                <AlertBox showInfo={showInfo} info={info} />
-            </div>
-            <Route path={HEXAPOD_LINK_PATHS} exact>
-                <div className="plot border">
+                    <Switch>
+                        <Route path="/" exact>
+                            <SuspenseLandingPage onMount={onPageLoad} />
+                        </Route>
+                        <Route path={PATHS.forwardKinematics.path}>
+                            <SuspenseForwardKinematicsPage
+                                params={{ pose: hexapodParams.pose }}
+                                onUpdate={updatePose}
+                                onMount={onPageLoad}
+                            />
+                        </Route>
+                        <Route path={PATHS.inverseKinematics.path}>
+                            <SuspenseInverseKinematicsPage
+                                params={{
+                                    dimensions: hexapodParams.dimensions,
+                                    ikParams: ikParams,
+                                }}
+                                onUpdate={updateIkParams}
+                                onMount={onPageLoad}
+                            />
+                        </Route>
+                        <Route path={PATHS.legPatterns.path}>
+                            <SuspenseLegPatternPage
+                                params={{ patternParams: patternParams }}
+                                onUpdate={updatePatternPose}
+                                onMount={onPageLoad}
+                            />
+                        </Route>
+                    </Switch>
+                    <PoseTable
+                        pose={hexapodParams.pose}
+                        showPoseTable={showPoseMessage}
+                    />
+                    <AlertBox showInfo={showInfo} info={info} />
+                </div>
+                <div hidden={path === "/"} className="plot border">
                     <SuspenseHexapodPlot
                         data={data}
                         layout={layout}
                         onRelayout={onRelayout}
                         revision={revision}
                     />
                 </div>
+            </div>
+            <Route path={HEXAPOD_LINK_PATHS} exact>
+                <NavDetailed />
             </Route>
-        </div>
-        <Route path={HEXAPOD_LINK_PATHS} exact>
-            <NavDetailed />
-        </Route>
-    </>
-)
+        </>
+    )
+}
 
 export default Routes
diff --git a/src/tests/components/__snapshots__/App.test.js.snap b/src/tests/components/__snapshots__/App.test.js.snap
@@ -364,6 +364,14 @@ exports[`AppFragment Renders App snapshot correctly 1`] = `
         </nav>
       </footer>
     </div>
+    <div
+      class="plot border"
+      hidden=""
+    >
+      <h2>
+        Loading...
+      </h2>
+    </div>
   </div>
 </DocumentFragment>
 `;