mitigating some weird nav issues and FOUC

1 files changed, 16 insertions, 4 deletions

diff --git a/frontend/site/viewer/viewer.container.js b/frontend/site/viewer/viewer.container.js
index 09f04c3..4135586 100644
--- a/frontend/site/viewer/viewer.container.js
+++ b/frontend/site/viewer/viewer.container.js
@@ -32,13 +32,23 @@ class ViewerContainer extends Component {
     window.addEventListener('resize', this.handleResize)
   }
 
+  componentDidMount() {
+    if (this.props.graph && this.props.interactive) {
+      this.load()
+    }
+  }
+
   componentDidUpdate(prevProps) {
     // console.log('didUpdate', this.props.graph !== prevProps.graph, this.props.location.pathname !== prevProps.location.pathname)
-    // console.log(this.props.location.pathname, prevProps.location.pathname, this.props.interactive)
-    if (this.props.graph !== prevProps.graph || this.props.location.pathname !== prevProps.location.pathname) {
+    // console.log(this.props.location.pathname, prevProps.location.pathname, this.props.interactive, prevProps.interactive)
+    if (
+      this.props.graph !== prevProps.graph ||
+      this.props.location.pathname !== prevProps.location.pathname ||
+      this.props.interactive !== prevProps.interactive
+    ) {
       this.load()
     }
-    if (this.props.interactive && (this.props.interactive !== prevProps.interactive)) {
+    else if (this.props.interactive && (this.props.interactive !== prevProps.interactive)) {
       this.setState({ roadblock: false })
       this.props.audio.player.playPage(this.state.page)
       this.resetTimer(this.state.page)
@@ -52,6 +62,7 @@ class ViewerContainer extends Component {
 
   load() {
     const { page_name } = this.props.match.params
+    // console.log("load", page_name)
     const { pages, home_page, path: graph_name } = this.props.graph
     const page_path = ["", graph_name, page_name].join('/')
     // if ((!page_path in pages) || page_name === 'index.html') {
@@ -60,7 +71,8 @@ class ViewerContainer extends Component {
     // }
     // console.log(this.props.interactive)
     const page = pages[page_path] || pages[home_page]
-    console.log("show page", page.id)
+    // console.log(pages, page)
+    // console.log("show page", page.id)
     if (!this.props.interactive && hasAutoplay(page)) {
       this.setState({ page, popups: {}, hidden: {}, roadblock: true, unloaded: false })
     } else {