geowarin/boot-react

Do not wait for the GET session request to display the GUI

geowarin opened this issue · 1 comments

Right now we are waiting for the backend to respond to a first request (is the user logged in?) before displaying anything on the client.

This method has the advantage of being straightforward: we can use the info returned by the server as the initial state.
However, it adds latency to the first render, which is pretty bad.

If you have ideas or propositions to improve this, I'll be happy to discuss them.

I finally came up with a solution to this.
In short:

  • I got rid of the thunk middleware and implemented a new one. It is inspired by the one in react-redux-universal-hot-example.
    This middleware handle actions that have a promise attribute. It will dispatch a first action before the promise is called and a second when it is fulfilled/rejected.
  • This allows us to keep a boolean in the state to know wether we are currently loading the session.
    It is also a cleaner way to deal with rest APIs, IMHO.
  • The App component, which is the root component will call the getSession() action once when the application loads.
  • We no longer use the onEnter hook of the router to define private pages.
    Instead, I created a method makePrivate() which takes a component and... make it private.
    A private component will display a spinner if the session is currently being loaded.
    It will display the original component if the session finished loading and we are correctly logged in.

If you want to play with it, you can add a Thread.sleep in the getSession() resource on the server and see how the GUI behaves.