Add loading indicator

app/assets/styles.css

@@ -71,6 +71,26 @@
   }
 }
 
+.loading-indicator {
+  display: flex;
+  min-height: 100vh;
+
+  svg {
+    @apply fill-base-2;
+    margin: auto;
+    animation: loading-indicator 0.45s infinite linear;
+
+    @keyframes loading-indicator {
+      0% {
+        transform: rotate(0deg);
+      }
+      100% {
+        transform: rotate(359deg);
+      }
+    }
+  }
+}
+
 body {
   &.sidebar-is-opened {
     overflow: hidden;

app/controllers/application.js

@@ -0,0 +1,11 @@
+import Controller from '@ember/controller';
+
+export default class ApplicationController extends Controller {
+  loadingIndicatorRemover() {
+    const el = document.querySelector('.loading-indicator');
+
+    if (el) {
+      el.parentNode.removeChild(el);
+    }
+  }
+}

app/index.html

@@ -14,6 +14,12 @@
     {{content-for "head-footer"}}
   </head>
   <body>
+    <div class="loading-indicator">
+      <svg width="80" height="80" viewBox="0 0 24 24" role="img">
+        <path d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z"/>
+      </svg>
+    </div>
+
     {{content-for "body"}}
 
     <script src="{{rootURL}}assets/vendor.js"></script>

app/templates/application.hbs

@@ -1,3 +1,5 @@
+{{this.loadingIndicatorRemover}}
+
 {{outlet}}
 
 <ToastsContainer />

tests/unit/controllers/application-test.js

@@ -0,0 +1,12 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'meiliadmin/tests/helpers';
+
+module('Unit | Controller | application', function (hooks) {
+  setupTest(hooks);
+
+  // TODO: Replace this with your real tests.
+  test('it exists', function (assert) {
+    let controller = this.owner.lookup('controller:application');
+    assert.ok(controller);
+  });
+});