0

I'm using react-router with react-transition-group to switch between full page components (think a simple book). However sometimes the next page has a few images. Therefore I don't want the next page to load until all the images / included CSS has also loaded. I don't mind having a loader before this transition takes place, waiting for the next component to load.

However I can't find any way to call events on the entire next component loading. componentDidMount() on the incoming component doesn't recognize whether the images have loaded within the new component, so when the next component slides in, the images often aren't loaded, so it's not very smooth.

Here's my CSSTransition and Switch code:

const App = withRouter(({ location }) => (
    <TransitionGroup>
        <CSSTransition
            key={location.key}
            classNames='slide'
            timeout={1000}
        >
            <Switch location={location}>
                <Route path="/:page" component={Subpage} />
                <Route path="/" exact component={Homepage} />
            </Switch>
        </CSSTransition>
    </TransitionGroup>
))
rfranklin
  • 1
  • 2
  • Image loading is a unique challenge distinct from React-- you might find some useful answers [here](https://stackoverflow.com/questions/280049/javascript-callback-for-knowing-when-an-image-is-loaded). – Alexander Nied Feb 26 '18 at 17:08
  • ^ using a combination of `refs` and what has been said above you might be able to query your `children`'s loaded state from your parent. e.g in the parent componentDidMount have a check for `this.refs[childName].hasLoaded` and in your child component once your `load` listener on your image ref has completed set `loaded` to `true` Theres much more information here https://developmentarc.gitbooks.io/react-indepth/content/life_cycle/birth/post_mount_with_component_did_mount.html – Francis Leigh Feb 26 '18 at 17:10

0 Answers0