Delay rendering of a components template in Ember for specified time?

I have a component, but I want to add an option that will delay the rendering of the template for a specified time, i.e:

{{pre-loader radius=60 delay=2000 message="Page is loading data"}}

And the components template:

<svg class="spinner" width="{{size}}px" height="{{size}}px" viewBox="0 0 {{viewBoxSize}} {{viewBoxSize}}" xmlns="http://ift.tt/nvqhV5">
  <circle class="path" fill="none" stroke-width="{{strokeWidth}}" stroke-linecap="round" cx="{{halfViewBoxSize}}" cy="{{halfViewBoxSize}}" r="{{radius}}"></circle>
</svg>
{{#if (is-greater-than message.length 0)}}
  <div class='loading-message'>
    <p>{{message}}</p>
  </div>
{{/if}}

I have one working solution that I will post as an answer below but I'd welcome a better approach than having to use an {{if}} in the template itself.