Handlebars: Best Way to Show Spinner While Waiting for AJAX request

I know the answer to "Best Way to Show Spinner While Waiting for AJAX request?" but what would be best approach when we semantic templates e.g. handlebars are used.

I've a theoretical solution to share but would like to know if there is any better approach.

Here is the template I defined:

<script id="AnalyticsTemplate" type="text/x-handlebars-template">
    <div class="circle-tile-content dark-blue">
                                <div class="circle-tile-description text-faded">Free Subscriptions</div>
                                
                                <div class="circle-tile-number text-faded "></div>
                                
                                <div class="preloading"></div>
                                
                                @*<a class="circle-tile-footer" href="#">More Info <i class="fa fa-chevron-circle-right"></i></a>*@
                            </div>
</script>

Current approach is to use 'IF' condition, and compile the same template twice. First, before the AJAX call with empty data and later on AJAX success/error.

Hope this is understood, if not, feel free to ask.

Any suggestion or feedback would be highly appreciated.