use preact for common components across site (#663)

* convert GitHub cards grid from lit-html to preact

* give hit counter the preact treatment

* extract loading spinner component to a shared location

* move *some* loading spinner styles to its JSX

* Update .percy.yml

* pick up images in JS w/ webpack

* pull star/fork icons straight from @primer/octicons

* a bit of cleanup

* check `typeof window !== "undefined"` before rendering

* bump misc. deps

* silence missing license warnings for preact-hooks and preact-compat

* add source-map-loader

* Update loading.js

assets/sass/components/_animation.scss

@@ -15,34 +15,6 @@
   will-change: transform;
 }
 
-// modified from https://tobiasahlin.com/spinkit/
-.loading {
-  text-align: center;
-
-  > div {
-    display: inline-block;
-    animation: loading 1.5s infinite ease-in-out both;
-
-    // stylelint-disable rule-empty-line-before
-    &:nth-child(1) {
-      animation-delay: -0.32s;
-    }
-    &:nth-child(2) {
-      animation-delay: -0.16s;
-    }
-    &:nth-child(3) {
-      animation-delay: 0s;
-    }
-    // stylelint-enable rule-empty-line-before
-
-    @include themes.themed(
-      (
-        background-color: "medium-light",
-      )
-    );
-  }
-}
-
 @keyframes wave {
   // stylelint-disable rule-empty-line-before
   0% {
@@ -99,6 +71,7 @@
   // stylelint-enable rule-empty-line-before
 }
 
+// modified from https://tobiasahlin.com/spinkit/
 @keyframes loading {
   // stylelint-disable rule-empty-line-before
   0%,

assets/sass/components/_global.scss

@@ -161,6 +161,19 @@ a img.emoji {
   cursor: inherit;
 }
 
+// pulsating loading spinner
+.loading {
+  display: inline-block;
+
+  > div {
+    @include themes.themed(
+      (
+        background-color: "medium-light",
+      )
+    );
+  }
+}
+
 // Responsive
 @mixin responsive() {
   body {