From e4f470805fa0c1ce035642b6157735906c4fd3be Mon Sep 17 00:00:00 2001
From: Ava Gaiety Wroten <ava@wroten.me>
Date: Sun, 22 Dec 2019 22:23:28 -0600
Subject: [PATCH] Loader for list

---
 app/components/loading-indicator.hbs          | 23 ++++++++++++++++
 app/components/recipe-add.hbs                 |  4 +++
 .../components/loading-indicator-test.js      | 26 +++++++++++++++++++
 3 files changed, 53 insertions(+)
 create mode 100644 app/components/loading-indicator.hbs
 create mode 100644 tests/integration/components/loading-indicator-test.js

diff --git a/app/components/loading-indicator.hbs b/app/components/loading-indicator.hbs
new file mode 100644
index 0000000..ef91e23
--- /dev/null
+++ b/app/components/loading-indicator.hbs
@@ -0,0 +1,23 @@
+{{!https://samherbert.net/svg-loaders/}}
+<svg class="fill-current text-teal-500 w-full h-8 my-4" viewBox="0 0 135 140" xmlns="http://www.w3.org/2000/svg">
+  <rect y="10" width="15" height="120" rx="6">
+    <animate attributeName="height" begin="0.5s" dur="1s" values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear" repeatCount="indefinite" />
+    <animate attributeName="y" begin="0.5s" dur="1s" values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear" repeatCount="indefinite" />
+  </rect>
+  <rect x="30" y="10" width="15" height="120" rx="6">
+    <animate attributeName="height" begin="0.25s" dur="1s" values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear" repeatCount="indefinite" />
+    <animate attributeName="y" begin="0.25s" dur="1s" values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear" repeatCount="indefinite" />
+  </rect>
+  <rect x="60" width="15" height="140" rx="6">
+    <animate attributeName="height" begin="0s" dur="1s" values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear" repeatCount="indefinite" />
+    <animate attributeName="y" begin="0s" dur="1s" values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear" repeatCount="indefinite" />
+  </rect>
+  <rect x="90" y="10" width="15" height="120" rx="6">
+    <animate attributeName="height" begin="0.25s" dur="1s" values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear" repeatCount="indefinite" />
+    <animate attributeName="y" begin="0.25s" dur="1s" values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear" repeatCount="indefinite" />
+  </rect>
+  <rect x="120" y="10" width="15" height="120" rx="6">
+    <animate attributeName="height" begin="0.5s" dur="1s" values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear" repeatCount="indefinite" />
+    <animate attributeName="y" begin="0.5s" dur="1s" values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear" repeatCount="indefinite" />
+  </rect>
+</svg>
diff --git a/app/components/recipe-add.hbs b/app/components/recipe-add.hbs
index 02d1b19..4913441 100644
--- a/app/components/recipe-add.hbs
+++ b/app/components/recipe-add.hbs
@@ -1,3 +1,7 @@
+{{#if this.fetchRecipe.isRunning}}
+  <LoadingIndicator />
+{{/if}}
+
 <button
   {{on "click" this.addRecipe}}
   class="w-full bg-teal-500 hover:bg-teal-400 text-white font-bold mt-4 py-2 px-4 border-b-4 border-teal-700 hover:border-teal-500 rounded">
diff --git a/tests/integration/components/loading-indicator-test.js b/tests/integration/components/loading-indicator-test.js
new file mode 100644
index 0000000..3ff8544
--- /dev/null
+++ b/tests/integration/components/loading-indicator-test.js
@@ -0,0 +1,26 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | loading-indicator', function(hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function(assert) {
+    // Set any properties with this.set('myProperty', 'value');
+    // Handle any actions with this.set('myAction', function(val) { ... });
+
+    await render(hbs`<LoadingIndicator />`);
+
+    assert.equal(this.element.textContent.trim(), '');
+
+    // Template block usage:
+    await render(hbs`
+      <LoadingIndicator>
+        template block text
+      </LoadingIndicator>
+    `);
+
+    assert.equal(this.element.textContent.trim(), 'template block text');
+  });
+});