add loading spinner to /projects

assets/js/src/projects.js

@@ -7,6 +7,7 @@ import twemoji from "twemoji";
 
 // don't continue if there isn't a span#meta-hits element on this page
 const wrapper = document.getElementById("github-cards");
+const spinner = document.getElementById("loading-spinner");
 
 if (wrapper) {
   dayjs.extend(relativeTime); // https://day.js.org/docs/en/plugin/relative-time
@@ -76,7 +77,12 @@ if (wrapper) {
         wrapper.appendChild(div);
       });
 
-      // these elements were added after the first twemoji parsing
+      // we're done, hide the loading spinner
+      if (spinner) {
+        spinner.style.display = "none";
+      }
+
+      // the repo descriptions were added after the first twemoji parsing
       twemoji.parse(wrapper, {
         callback: (icon) => `/assets/emoji/${icon}.svg`,
       });

assets/sass/components/_animation.scss

@@ -18,13 +18,9 @@
 
 // modified from https://tobiasahlin.com/spinkit/
 .spinner {
-  width: 20px;
   text-align: center;
-  display: inline-block;
 
   > div {
-    width: 5px;
-    height: 10px;
     display: inline-block;
     animation: loader 1.4s infinite ease-in-out both;
 

assets/sass/pages/_projects.scss

@@ -20,6 +20,17 @@ div.layout-projects {
     text-align: center;
   }
 
+  div#loading-spinner {
+    width: 40px;
+    display: block;
+    margin: 1.2em auto 0 auto;
+
+    > div {
+      width: 10px;
+      height: 20px;
+    }
+  }
+
   div#github-cards {
     display: flex;
     flex-direction: row;
@@ -31,11 +42,11 @@ div.layout-projects {
     div.github-card {
       flex-grow: 1;
       display: block;
-      width: 416px;
+      width: 416px; // magic number
-      padding: 12px 16px;
+      padding: 1em 1.2em;
-      margin: 8px;
+      margin: 0.6em;
       border: 1px solid;
-      border-radius: 6px;
+      border-radius: 0.5em;
       font-size: 0.9em;
 
       @include themes.themed(color, "medium-dark");
@@ -47,12 +58,12 @@ div.layout-projects {
       }
 
       p.repo-description {
-        margin: 4px 0 8px 0;
+        margin: 0.3em 0 0.6em 0;
       }
 
       div.repo-meta {
         display: inline-block;
-        margin-right: 12px;
+        margin-right: 1.2em;
         font-size: 0.925em;
 
         @include themes.themed(color, "medium");
@@ -60,19 +71,19 @@ div.layout-projects {
         svg {
           display: inline-block;
           position: relative;
-          top: 3px;
+          top: 0.25em;
-          margin-right: 2px;
+          margin-right: 0.2em;
           fill: currentColor;
         }
 
         span.repo-language-color {
           display: inline-block;
-          width: 14px;
+          width: 1.2em;
-          height: 14px;
+          height: 1.2em;
           border-radius: 50%;
           position: relative;
-          top: 2px;
+          top: 0.235em;
-          margin-right: 2px;
+          margin-right: 0.2em;
         }
       }
     }

assets/sass/pages/_single.scss

@@ -53,6 +53,16 @@ div.layout-single {
         }
       }
     }
+
+    div#hit-spinner {
+      display: inline-block;
+      width: 20px;
+
+      > div {
+        width: 5px;
+        height: 10px;
+      }
+    }
   }
 
   h1.title {

layouts/_default/projects.html

@@ -3,6 +3,8 @@
   <h1><a class="no-underline" href="{{ .Permalink }}">{{ .Title | markdownify }}</a></h1>
 
   <div id="content">
+    <div id="loading-spinner" class="spinner"><div class="spin-bounce1"></div><div class="spin-bounce2"></div><div class="spin-bounce3"></div></div>
+
     <div id="github-cards"></div>
 
     <p><a href="https://github.com/jakejarvis?tab=repositories" target="_blank" rel="noopener">View more on GitHub...</a></p>

package.json

@@ -70,8 +70,9 @@
     "copy-webpack-plugin": "^9.0.1",
     "css-loader": "^6.2.0",
     "css-minimizer-webpack-plugin": "^3.0.2",
+    "debug": "^4.3.2",
     "del": "^6.0.0",
-    "eslint": "~7.31.0",
+    "eslint": "~7.32.0",
     "eslint-config-prettier": "~8.3.0",
     "eslint-plugin-compat": "~3.11.1",
     "eslint-plugin-import": "~2.23.4",
@@ -101,7 +102,7 @@
     "postcss-svgo": "^5.0.2",
     "prettier": "^2.3.2",
     "pretty-quick": "^3.1.1",
-    "sass": "^1.36.0",
+    "sass": "^1.37.0",
     "sass-loader": "^12.1.0",
     "simple-git-hooks": "^2.5.1",
     "stylelint": "~13.13.1",

yarn.lock

@@ -1273,9 +1273,9 @@
     form-data "^3.0.0"
 
 "@types/node@*":
-  version "16.4.7"
+  version "16.4.8"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-16.4.7.tgz#f7afa78769d4b477f5092d7c3468e2e8653d779c"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-16.4.8.tgz#ef4974f47524448428542365db2fe7b638f928e5"
-  integrity sha512-aDDY54sst8sx47CWT6QQqIZp45yURq4dic0+HCYfYNcY5Ejlb/CLmFnRLfy3wQuYafOeh3lB/DAKaqRKBtcZmA==
+  integrity sha512-VL7RZyCpfYEmbyd3/Eq5RNYhZt7yoL1JThZQ3KzimzhLya2Qa86U1ZZmioNWAAjiz99z1ED1xF9NUV2srvfVrA==
 
 "@types/normalize-package-data@^2.4.0":
   version "2.4.1"
@@ -3206,7 +3206,7 @@ debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.9:
   dependencies:
     ms "2.0.0"
 
-debug@4, debug@^4.0.0, debug@^4.0.1, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1:
+debug@4, debug@^4.0.0, debug@^4.0.1, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.2:
   version "4.3.2"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.2.tgz#f0a49c18ac8779e31d4a0c6029dfb76873c7428b"
   integrity sha512-mOp8wKcvj7XxC78zLgw/ZA+6TSgkoE2C/ienthhRD298T7UNwAg9diBpLRxC0mOezLl4B0xV7M0cCO6P/O0Xhw==
@@ -3666,9 +3666,9 @@ ee-first@1.1.1:
   integrity sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=
 
 electron-to-chromium@^1.3.723:
-  version "1.3.791"
+  version "1.3.792"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.791.tgz#e38f325ff22470bdcff34409d58c0baf9c2e3e93"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.792.tgz#791b0d8fcf7411885d086193fb49aaef0c1594ca"
-  integrity sha512-Tdx7w1fZpeWOOBluK+kXTAKCXyc79K65RB6Zp0+sPSZZhDjXlrxfGlXrlMGVVQUrKCyEZFQs1UBBLNz5IdbF0g==
+  integrity sha512-RM2O2xrNarM7Cs+XF/OE2qX/aBROyOZqqgP+8FXMXSuWuUqCfUUzg7NytQrzZU3aSqk1Qq6zqnVkJsbfMkIatg==
 
 emoji-regex@^7.0.1:
   version "7.0.3"
@@ -3981,10 +3981,10 @@ eslint-visitor-keys@^2.0.0, eslint-visitor-keys@^2.1.0:
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz#f65328259305927392c938ed44eb0a5c9b2bd303"
   integrity sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==
 
-eslint@~7.31.0:
+eslint@~7.32.0:
-  version "7.31.0"
+  version "7.32.0"
-  resolved "https://registry.yarnpkg.com/eslint/-/eslint-7.31.0.tgz#f972b539424bf2604907a970860732c5d99d3aca"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-7.32.0.tgz#c6d328a14be3fb08c8d1d21e12c02fdb7a2a812d"
-  integrity sha512-vafgJpSh2ia8tnTkNUkwxGmnumgckLh5aAbLa1xRmIn9+owi8qBNGKL+B881kNKNTy7FFqTEkpNkUvmw0n6PkA==
+  integrity sha512-VHZ8gX+EDfz+97jGcgyGCyRia/dPOd6Xh9yPv8Bl1+SoaIwD+a/vlrOmGRUyOYu7MwUhc7CxqeaDZU13S4+EpA==
   dependencies:
     "@babel/code-frame" "7.12.11"
     "@eslint/eslintrc" "^0.4.3"
@@ -8993,10 +8993,10 @@ sass-loader@^12.1.0:
     klona "^2.0.4"
     neo-async "^2.6.2"
 
-sass@^1.36.0:
+sass@^1.37.0:
-  version "1.36.0"
+  version "1.37.0"
-  resolved "https://registry.yarnpkg.com/sass/-/sass-1.36.0.tgz#5912ef9d5d16714171ba11cb17edb274c4bbc07e"
+  resolved "https://registry.yarnpkg.com/sass/-/sass-1.37.0.tgz#f1b03a9d072ee9053a29d125c8130c78e92827c2"
-  integrity sha512-fQzEjipfOv5kh930nu3Imzq3ie/sGDc/4KtQMJlt7RRdrkQSfe37Bwi/Rf/gfuYHsIuE1fIlDMvpyMcEwjnPvg==
+  integrity sha512-B+Tu6cSAG8ffs/cqsZl/bgSH2pCmavDaPTYAoW8QA1qNHh/RqndNfVKuABKYkLjUQ5aq/BnCENVpE80cqdSM1w==
   dependencies:
     chokidar ">=3.0.0 <4.0.0"