about and music routes now load with spinners, as well as the compone…

…nts they load
michaelchadwick · Jun 6, 2024 · b43c214 · b43c214
1 parent 917c9a1
commit b43c214
Show file tree

Hide file tree

Showing 12 changed files with 31 additions and 19 deletions.
diff --git a/app/components/gh-commits.hbs → app/components/gh-commits/index.hbs b/app/components/gh-commits.hbs → 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>
diff --git a/app/components/gh-commits.js → app/components/gh-commits/index.js b/app/components/gh-commits.js → app/components/gh-commits/index.js
diff --git a/app/components/gh-commits/loading.hbs 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>
diff --git a/app/components/song-list.hbs → app/components/song-list/index.hbs b/app/components/song-list.hbs → 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 → app/components/song-list/index.js b/app/components/song-list.js → app/components/song-list/index.js
diff --git a/app/components/song-list/loading.hbs 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
@@ -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
@@ -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>
diff --git 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
@@ -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>
diff --git 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}}
diff --git 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'],
   };