From b43c214fcc8637060245e7aef8203818da2c9058 Mon Sep 17 00:00:00 2001
From: Michael Chadwick <michael.chadwick@gmail.com>
Date: Thu, 6 Jun 2024 08:36:51 -0700
Subject: [PATCH] about and music routes now load with spinners, as well as the
 components they load

---
 .../{gh-commits.hbs => gh-commits/index.hbs}     | 16 ++++++++--------
 .../{gh-commits.js => gh-commits/index.js}       |  0
 app/components/gh-commits/loading.hbs            |  8 ++++++++
 .../{song-list.hbs => song-list/index.hbs}       |  2 +-
 .../{song-list.js => song-list/index.js}         |  0
 app/components/song-list/loading.hbs             |  1 +
 app/routes/about.js                              |  5 -----
 app/templates/about-loading.hbs                  |  5 ++++-
 app/templates/about.hbs                          |  5 +++--
 app/templates/music-loading.hbs                  |  5 ++++-
 app/templates/music.hbs                          |  2 +-
 config/icons.js                                  |  1 +
 12 files changed, 31 insertions(+), 19 deletions(-)
 rename app/components/{gh-commits.hbs => gh-commits/index.hbs} (52%)
 rename app/components/{gh-commits.js => gh-commits/index.js} (100%)
 create mode 100644 app/components/gh-commits/loading.hbs
 rename app/components/{song-list.hbs => song-list/index.hbs} (95%)
 rename app/components/{song-list.js => song-list/index.js} (100%)
 create mode 100644 app/components/song-list/loading.hbs

diff --git a/app/components/gh-commits.hbs b/app/components/gh-commits/index.hbs
similarity index 52%
rename from app/components/gh-commits.hbs
rename to app/components/gh-commits/index.hbs
index 6364cd1..bf28dad 100644
--- a/app/components/gh-commits.hbs
+++ b/app/components/gh-commits/index.hbs
@@ -3,15 +3,15 @@
   {{#if @commits}}
   <ul>
     {{#each @commits as |commit|}}
-      <li>
-        {{commit.commit.author.date}} - 
-        <a href={{commit.html_url}} target="_blank" rel="noopener noreferrer">
-          {{commit.commit.message}}
-        </a>
-      </li>
+    <li>
+      {{commit.commit.author.date}} - 
+      <a href={{commit.html_url}} target="_blank" rel="noopener noreferrer">
+        {{commit.commit.message}}
+      </a>
+    </li>
     {{/each}}
   </ul>
-{{else}}
+  {{else}}
   <p>{{t "general.noneFound" items="commits"}}</p>
-{{/if}}
+  {{/if}}
 </div>
\ No newline at end of file
diff --git a/app/components/gh-commits.js b/app/components/gh-commits/index.js
similarity index 100%
rename from app/components/gh-commits.js
rename to app/components/gh-commits/index.js
diff --git a/app/components/gh-commits/loading.hbs b/app/components/gh-commits/loading.hbs
new file mode 100644
index 0000000..edaa439
--- /dev/null
+++ b/app/components/gh-commits/loading.hbs
@@ -0,0 +1,8 @@
+<div class="gh-commits-loading">
+  <h3>{{if @title @title (t "components.headGhCommits")}}</h3>
+  {{#if @commits}}
+  <p>{{t "general.loading" items="commits"}}</p>
+  {{else}}
+  <p>{{t "general.noneFound" items="commits"}}</p>
+  {{/if}}
+</div>
\ No newline at end of file
diff --git a/app/components/song-list.hbs b/app/components/song-list/index.hbs
similarity index 95%
rename from app/components/song-list.hbs
rename to app/components/song-list/index.hbs
index a62d76e..1496291 100644
--- a/app/components/song-list.hbs
+++ b/app/components/song-list/index.hbs
@@ -1,5 +1,5 @@
 {{#if this.currentlyLoading}}
-  {{t "general.loading"}}
+  {{t "general.loading" items="songs"}}
 {{else}}
   {{#if @songs}}
     <ul class="song-list">
diff --git a/app/components/song-list.js b/app/components/song-list/index.js
similarity index 100%
rename from app/components/song-list.js
rename to app/components/song-list/index.js
diff --git a/app/components/song-list/loading.hbs b/app/components/song-list/loading.hbs
new file mode 100644
index 0000000..ccdda90
--- /dev/null
+++ b/app/components/song-list/loading.hbs
@@ -0,0 +1 @@
+<FaIcon @icon="spinner" @spin={{true}} />{{t "general.loading"}}
diff --git a/app/routes/about.js b/app/routes/about.js
index a3c2f1b..ed678f0 100644
--- a/app/routes/about.js
+++ b/app/routes/about.js
@@ -15,11 +15,6 @@ export default class AboutRoute extends Route {
     const response = await fetch(url);
     const commits = await response.json();
 
-    console.log(
-      'commits',
-      commits.map((c) => c.commit),
-    );
-
     return commits;
   }
 
diff --git a/app/templates/about-loading.hbs b/app/templates/about-loading.hbs
index 2581557..47ca30c 100644
--- a/app/templates/about-loading.hbs
+++ b/app/templates/about-loading.hbs
@@ -1,3 +1,6 @@
+<h2>{{t "layout.headAbout"}}</h2>
+<p>{{t "sections.about.description" htmlSafe=true}}</p>
+
 <div class="loading-spinner">
-  {{t "general.loading"}}
+  <FaIcon @icon="spinner" @spin={{true}} />{{t "general.loading"}}
 </div>
\ No newline at end of file
diff --git a/app/templates/about.hbs b/app/templates/about.hbs
index 0247ac2..97942ae 100644
--- a/app/templates/about.hbs
+++ b/app/templates/about.hbs
@@ -1,9 +1,10 @@
 <h2>{{t "layout.headAbout"}}</h2>
 {{t "sections.about.description" htmlSafe=true}}
+
 {{#if this.isLoading}}
-  {{t "general.loading"}}
+  <GhCommits::Loading />
 {{else}}
-  <GhCommits 
+  <GhCommits
     @title="Last 5 Commits" 
     @commits={{@model}} 
   />
diff --git a/app/templates/music-loading.hbs b/app/templates/music-loading.hbs
index 2581557..3f4b1e3 100644
--- a/app/templates/music-loading.hbs
+++ b/app/templates/music-loading.hbs
@@ -1,3 +1,6 @@
+<h2>{{t "layout.headMusic"}}</h2>
+<p>{{t "sections.music.description" htmlSafe=true}}</p>
+
 <div class="loading-spinner">
-  {{t "general.loading"}}
+  <FaIcon @icon="spinner" @spin={{true}} />{{t "general.loading"}}
 </div>
\ No newline at end of file
diff --git a/app/templates/music.hbs b/app/templates/music.hbs
index 49eaa9d..b188eec 100644
--- a/app/templates/music.hbs
+++ b/app/templates/music.hbs
@@ -1,7 +1,7 @@
 <h2>{{t "layout.headMusic"}}</h2>
 <p>{{t "sections.music.description"}}</p>
 {{#if this.isLoading}}
-  {{t "general.loading"}}
+  <SongList::Loading />
 {{else}}
   <SongList @songs={{@model}} />
 {{/if}}
\ No newline at end of file
diff --git a/config/icons.js b/config/icons.js
index b1df609..edf84c6 100644
--- a/config/icons.js
+++ b/config/icons.js
@@ -9,6 +9,7 @@ module.exports = function () {
       'pause',
       'play',
       'square-up-right',
+      'spinner',
     ],
     'free-brands-svg-icons': ['github'],
   };