1 files changed, 20 insertions, 2 deletions
diff --git a/animism-align/frontend/app/views/viewer/nav/nav.parent.js b/animism-align/frontend/app/views/viewer/nav/nav.parent.js
index 467907d..33f2d58 100644
--- a/animism-align/frontend/app/views/viewer/nav/nav.parent.js
+++ b/animism-align/frontend/app/views/viewer/nav/nav.parent.js
@@ -13,6 +13,7 @@ class NavParent extends Component {
     hoveringNext: false,
     hoveringNav: false,
     suppressHover: false,
+    thumbnailMediaURL: "",
   }
   constructor(props){
     super(props)
@@ -25,8 +26,24 @@ class NavParent extends Component {
     this.handleNavBarClick = this.handleNavBarClick.bind(this)
     this.handleSectionLinkClick = this.handleSectionLinkClick.bind(this)
     this.handleSectionLinkTextClick = this.handleSectionLinkTextClick.bind(this)
+    this.updateThumbnail = this.updateThumbnail.bind(this)
     this.goToNextSection = this.goToNextSection.bind(this)
   }
+  componentDidMount() {
+    clearTimeout(this.thumbnailLoadTimeout)
+    this.thumbnailLoadTimeout = setTimeout(this.updateThumbnail, 200)
+  }
+  componentDidUpdate(prevProps){
+    if (prevProps.nextSection !== this.props.nextSection) {
+      clearTimeout(this.thumbnailLoadTimeout)
+      this.thumbnailLoadTimeout = setTimeout(this.updateThumbnail, 200)
+    }
+  }
+  updateThumbnail() {
+    if (this.props.nextSection && this.props.nextSection.media.length) {
+      this.setState({ thumbnailMediaURL: thumbnailURL(this.props.nextSection.media[0].media) })
+    }
+  }
   handleMouseEnter(){
     // console.log('mouse enter')
     if (this.state.suppressHover) return
@@ -94,6 +111,7 @@ class NavParent extends Component {
   }
   render() {
     const { viewer, currentSection, play_ts, started, playing } = this.props
+    const { thumbnailMediaURL } = this.state
     let containerClassName = "viewer-nav " + viewer.navStyle
     let navClassName = 'nav-row main-nav'
     if (this.state.hoveringNav || !started) containerClassName += ' hovering-nav'
@@ -143,8 +161,7 @@ class NavParent extends Component {
             onClick={this.goToNextSection}
             style={{
               backgroundImage: (
-                viewer.nextSection.media.length
-                && 'url(' + thumbnailURL(viewer.nextSection.media[0].media) + ')'
+                thumbnailMediaURL && 'url(' + thumbnailMediaURL + ')'
               ),
             }}
           />
@@ -157,6 +174,7 @@ class NavParent extends Component {
 const mapStateToProps = state => ({
   viewer: state.viewer,
   currentSection: state.viewer.currentSection,
+  nextSection: state.viewer.nextSection,
   started: state.audio.started,
   playing: state.audio.playing,
   play_ts: state.audio.play_ts,