Replace 'fetch' API with isomorphic request solution that uses XHR for progress UI

[jonsherrard]

When the Tapestry client JS bundle picks up routing and navigation, we lose any visual feedback on the progress of a page load.

The current implementation of Fetch does not have progress events, the idea is that on-the-fly calculation will be done using streams in the future.

In the meantime we will have to use an XHR solution that an onprogress even on the client.

https://github.com/matthewwithanm/httpplease.js Seems like reasonable candidate - IE9 compatibility etc, haven't vetted it heavily though.

[jonsherrard]

This may be a 🌶

[thomasdigby]

axios looks a good bet, onDownloadProgress will return us a progress event. Here's an example.

How would we expose this progress event to the user? via the config? I'm struggling to understand how we'd render and update a component alongside the static main view. Whaddaya thoughts?

[jonsherrard]

The way I see it they'd provide a custom progress loader a-la github.

However we could emit the event via a proxy object on window

componentDidMount() {
  window.tapestryDataLoader.on('onprogress', (percentageComplete) => {
    this.setState({
      fetchProgress: percentageComplete
    })
  })
}

or via component they supply:

import DefaultProgress from './default-progress'

const Loader = loadContext.customProgress || DefaultProgress 

class App extends Component {
   render(
      <div>
          <Loader value={onDownloadProgress} /> 
          <Router>
              // All your app stuff
          </Router>
      </div>
   )
}

Maybe we could start with an event emitter proxy for a first version. Does that make sense and seem feasible?

[thomasdigby]

https://github.com/mjackson/react-broadcast