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?