I’m trying figure out a good pattern to follow when setting up loading substates.
A lot of the time I’m running into situations where a user decides to go to a new route and I want to take them there immediately. I don’t want my template rendering to be delayed until all of the model hook promises have been resolved. I’d rather bring users to the page that they want to see and have the page populated with data as it comes in.
I thought this was something that I could accomplish by taking advantage of loading substates but I’m not quite sure how to set this up to get the intended effect.
A simple search scenario
SearchIndex template here is the one with the darker gray background. The search results are coming from the
model hook in the SearchIndexRoute. The search input is updating the value of a queryParam defined on the
SearchIndexController that is set to refresh the
model hook in the route whenever it changes.
Search when loading
model hook’s data is loading, the
search/loading.hbs template fills the
outlet in the
What I want Search to look like when loading
The problem is that I want the user to immediately be presented with the search input when they decide to transition to this route. Further, when they decide to enter a search query into the input, the search input should stay present while the
model hook is being refreshed.