From ed7f9fbabf1959d4d591e5a9d0cd519149849498 Mon Sep 17 00:00:00 2001
From: Stanislav Romanov <kaermorchen@gmail.com>
Date: Mon, 19 Sep 2022 10:54:45 +0300
Subject: [PATCH] Add loading indicator

---
 app/assets/styles.css                      | 20 ++++++++++++++++++++
 app/controllers/application.js             | 11 +++++++++++
 app/index.html                             |  6 ++++++
 app/templates/application.hbs              |  2 ++
 tests/unit/controllers/application-test.js | 12 ++++++++++++
 5 files changed, 51 insertions(+)
 create mode 100644 app/controllers/application.js
 create mode 100644 tests/unit/controllers/application-test.js

diff --git a/app/assets/styles.css b/app/assets/styles.css
index 0d842d1..717944c 100644
--- a/app/assets/styles.css
+++ b/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;
diff --git a/app/controllers/application.js b/app/controllers/application.js
new file mode 100644
index 0000000..ca7dd56
--- /dev/null
+++ b/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);
+    }
+  }
+}
diff --git a/app/index.html b/app/index.html
index 5815049..072eed3 100644
--- a/app/index.html
+++ b/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>
diff --git a/app/templates/application.hbs b/app/templates/application.hbs
index 7fa6fb9..3ac134b 100644
--- a/app/templates/application.hbs
+++ b/app/templates/application.hbs
@@ -1,3 +1,5 @@
+{{this.loadingIndicatorRemover}}
+
 {{outlet}}
 
 <ToastsContainer />
diff --git a/tests/unit/controllers/application-test.js b/tests/unit/controllers/application-test.js
new file mode 100644
index 0000000..209e6b9
--- /dev/null
+++ b/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);
+  });
+});