How do you animate while fetching data with redux and thunk? -

say have index page facebook list of friends. want pre-fetch first ten friends' profiles, when route 1 of profiles, application won't need make request.

but want animate transition .x seconds profile page that, in case profile isn't loaded, don't see loading screen (hoping actual request return in less animation time).

the tricky part me wrap head around is: when change route , re-render page actual profile (rather animation transitioning it).

it seems set in stone router should concerned fetching data necessary, waiting, , rendering actual profile.

it seems action creator must figure out when change route. , since seems route can changed after both transition and api call have finished, way can figure action creator looks like:

    function visit_profile(profile_id) {       return (dispatch) => {         download_promise = dispatch(download_profile(profile_id));         animation_promise = dispatch(transition_to_profile(profile_id));         return promise.all([download_promise, animation_promise]).then(           (profile) => dispatch(view_profile(profile_id)),           (error) => dispatch(404_profile())         );       };     }      // downloads profile , puts store.     function download_profile() { ... }      // kicks off animations (with promise resolved when animation finished).     function transition_to_profile() { ... }      // changes url, thereby re-rendering page actual profile.     function view_profile() { ... } 

but seems overly complicated me. whenever i'm doing right in redux, know, because feels right. doesn't. seems wrong. can't see other way it. but, after looking through lot of examples, i'm not finding puts me on right path.

are there established conventions this?

thanks!