How to enter a partial loading state for a controller

I have a stories controller that renders stories from an API into a table. Above that table you have a search field, a select drop-down to filter results, and a date picker to change the date range. I have a loading template specified so that when I change any of these values, the whole view disappears and it says “Loading…” and then the whole view reappears when it’s done.

Ideally, the 3 filter options above the table should never disappear, but the table below it should change to “Loading…”. I’ve done a full day of googling and tinkering and I can’t figure out how to handle this behavior. I tried overriding ‘renderTemplate’ in my router to render a header (with my 3 filter options) and then my default this.render() afterward, but it seems that the loading template completely overrides the renderTemplate call.

So right now it’s like this:

<div><header id="filters">...</header><table id="stories"></table></div>

Then when a filter changes it becomes

<div class="loading">Loading stories...</div>

I want it to instead become:

<div><header id="filters">...</header><div class="loading">Loading stories...</div></div>

Any ideas for me?

1 Like