ui: ConsulLoader component (#7719)

Moves the `consul-loader` partial to a template-only component

ui-v2/app/components/app-view/index.hbs

@@ -70,7 +70,7 @@
 {{/if}}
 <div>
 {{#if loading}}
-    {{partial 'consul-loading'}}
+    <ConsulLoader />
 {{else}}
     {{#if (not enabled) }}
       <YieldSlot @name="disabled">{{yield}}</YieldSlot>

ui-v2/app/components/consul-loader/README.mdx

@@ -0,0 +1,16 @@
+## ConsulLoader
+
+`<ConsulLoader />`
+
+Simple template-only component to show the circulr animated Consul loader animation.
+
+| Argument | Type | Default | Description |
+| --- | --- | --- | --- |
+
+
+### See
+
+- [Component Source Code](./index.js)
+- [Template Source Code](./index.hbs)
+
+---

ui-v2/app/components/consul-loader/index.hbs

@@ -51,4 +51,3 @@
         <circle r="9" cx="22" cy="22" style="transform-origin: 22px 22px" />
     </g>
 </svg>
-

ui-v2/app/components/consul-loader/index.js

@@ -0,0 +1,5 @@
+import Component from '@ember/component';
+
+export default Component.extend({
+  tagName: '',
+});

ui-v2/app/templates/application.hbs

@@ -7,7 +7,7 @@
 {{else}}
     <AppView @class="loading show">
       <BlockSlot @name="content">
-        {{partial 'consul-loading'}}
+        <ConsulLoader />
       </BlockSlot>
     </AppView>
 {{/if}}