Implement entry and feed pagination

frontend/css/styles.css

@@ -6,6 +6,27 @@ html {
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 }
 
+.htmx-indicator {
+  display: none;
+}
+
+.htmx-request .list-loading {
+  display: block;
+}
+
+.htmx-request.list-loading {
+  display: block;
+}
+
+.list-loading {
+  margin: 24px auto;
+}
+
+img.loading {
+  filter: invert(100%);
+  max-width: 64px;
+}
+
 /* Header */
 
 header.header nav {

frontend/img/three-dots.svg

@@ -0,0 +1,33 @@
+<!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
+<svg width="120" height="30" viewBox="0 0 120 30" xmlns="http://www.w3.org/2000/svg" fill="#fff">
+    <circle cx="15" cy="15" r="15">
+        <animate attributeName="r" from="15" to="15"
+                 begin="0s" dur="0.8s"
+                 values="15;9;15" calcMode="linear"
+                 repeatCount="indefinite" />
+        <animate attributeName="fill-opacity" from="1" to="1"
+                 begin="0s" dur="0.8s"
+                 values="1;.5;1" calcMode="linear"
+                 repeatCount="indefinite" />
+    </circle>
+    <circle cx="60" cy="15" r="9" fill-opacity="0.3">
+        <animate attributeName="r" from="9" to="9"
+                 begin="0s" dur="0.8s"
+                 values="9;15;9" calcMode="linear"
+                 repeatCount="indefinite" />
+        <animate attributeName="fill-opacity" from="0.5" to="0.5"
+                 begin="0s" dur="0.8s"
+                 values=".5;1;.5" calcMode="linear"
+                 repeatCount="indefinite" />
+    </circle>
+    <circle cx="105" cy="15" r="15">
+        <animate attributeName="r" from="15" to="15"
+                 begin="0s" dur="0.8s"
+                 values="15;9;15" calcMode="linear"
+                 repeatCount="indefinite" />
+        <animate attributeName="fill-opacity" from="1" to="1"
+                 begin="0s" dur="0.8s"
+                 values="1;.5;1" calcMode="linear"
+                 repeatCount="indefinite" />
+    </circle>
+</svg>

frontend/js/index.ts

@@ -1,7 +1,6 @@
 import htmx from 'htmx.org';
-import 'htmx.org/dist/ext/sse';
 
-// import CSS so it gets named with a content hash that busts caches
+// import assets so they get named with a content hash that busts caches
 import '../css/styles.css';
 
 import './localTimeController';
@@ -13,3 +12,6 @@ declare global {
 }
 
 window.htmx = htmx;
+
+// eslint-disable-next-line import/first
+import 'htmx.org/dist/ext/sse';