I am building a React App using the react-router library and the Flux architecture.
Now a doubt came up. Should I load all the required data upfront or make each route load the data it needs when it's the time? It would be weird when the user enters the app through an edit page and, when he saves the form it goes to the list of objects but it's empty (has only the one object) until the data is fetched.
What would be the best approach?
You don't want to go deep into preloading data in anticipation of what the user is going to do. It improves the UX of the list screen but it degrades the UX of the edit screen. I've been down that road. It's fine at first, but as requirements change, and you start also loading this or loading that, the UX really goes downhill.
In Flux, you should only load data in the Action. To initialize the data for your component, you can call the appropriate Action from
componentWillMount().If you're worried about the user seeing no data when they navigate to the list screen for the first time, you should show some sort of loading indicator.
If your data loads slowly, you should implement a progressive loading scheme (maybe 5 items at a time).
For a look-and-feel example, just open up the main News Feed on facebook.com. Notice that initially (depending on your internet speed), there are no stories listed. You see blurry boxes into which stories will load. As the data loads, stories appear. They also have progressive loading implemented. Notice that as you scroll down the page (quickly), you'll see that blurry box at the bottom of the page before older stories are loaded and rendered.