diff --git a/ui-v2/app/components/app-view/index.hbs b/ui-v2/app/components/app-view/index.hbs
index ababdd8b49..c27e84034a 100644
--- a/ui-v2/app/components/app-view/index.hbs
+++ b/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>
diff --git a/ui-v2/app/components/consul-loader/README.mdx b/ui-v2/app/components/consul-loader/README.mdx
new file mode 100644
index 0000000000..b65305eeb7
--- /dev/null
+++ b/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)
+
+---
diff --git a/ui-v2/app/templates/-consul-loading.hbs b/ui-v2/app/components/consul-loader/index.hbs
similarity index 99%
rename from ui-v2/app/templates/-consul-loading.hbs
rename to ui-v2/app/components/consul-loader/index.hbs
index 871f2b2ac0..1711fdc0e1 100644
--- a/ui-v2/app/templates/-consul-loading.hbs
+++ b/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>
-
diff --git a/ui-v2/app/components/consul-loader/index.js b/ui-v2/app/components/consul-loader/index.js
new file mode 100644
index 0000000000..4798652642
--- /dev/null
+++ b/ui-v2/app/components/consul-loader/index.js
@@ -0,0 +1,5 @@
+import Component from '@ember/component';
+
+export default Component.extend({
+  tagName: '',
+});
diff --git a/ui-v2/app/templates/application.hbs b/ui-v2/app/templates/application.hbs
index 77297bbc28..763ccd8bc4 100644
--- a/ui-v2/app/templates/application.hbs
+++ b/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}}