Add spinner for fetching a tweet; show error messages on server errors (i.e., panics)

internal/webserver/response_helpers.go

@@ -34,5 +34,17 @@ func (app *Application) error_500(w http.ResponseWriter, err error) {
 	if err2 != nil {
 		panic(err2)
 	}
-	http.Error(w, "Server error :(", 500)
+
+	w.Header().Set("HX-Reswap", "beforeend")
+	w.Header().Set("HX-Retarget", "main")
+	w.Header().Set("HX-Push-Url", "false")
+
+	r := renderer{
+		Filenames: []string{get_filepath("tpl/http_500.tpl")},
+		TplName: "error-toast",
+		Data: struct{
+			ErrorMsg string
+		}{err.Error()},
+	}
+	r.BufferedRender(w)
 }

internal/webserver/static/icons/spinner.svg

@@ -0,0 +1,48 @@
+<!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
+<!-- Todo: add easing -->
+<!-- https://samherbert.net/svg-loaders -->
+<svg width="57" height="57" viewBox="0 0 57 57" xmlns="http://www.w3.org/2000/svg" stroke="#fff">
+    <g fill="none" fill-rule="evenodd">
+        <g transform="translate(1 1)" stroke-width="2">
+            <circle cx="5" cy="50" r="5">
+                <animate attributeName="cy"
+                     begin="0s" dur="2.2s"
+                     values="50;5;50;50"
+                     calcMode="linear"
+                     repeatCount="indefinite" />
+                <animate attributeName="cx"
+                     begin="0s" dur="2.2s"
+                     values="5;27;49;5"
+                     calcMode="linear"
+                     repeatCount="indefinite" />
+            </circle>
+            <circle cx="27" cy="5" r="5">
+                <animate attributeName="cy"
+                     begin="0s" dur="2.2s"
+                     from="5" to="5"
+                     values="5;50;50;5"
+                     calcMode="linear"
+                     repeatCount="indefinite" />
+                <animate attributeName="cx"
+                     begin="0s" dur="2.2s"
+                     from="27" to="27"
+                     values="27;49;5;27"
+                     calcMode="linear"
+                     repeatCount="indefinite" />
+            </circle>
+            <circle cx="49" cy="50" r="5">
+                <animate attributeName="cy"
+                     begin="0s" dur="2.2s"
+                     values="50;50;5;50"
+                     calcMode="linear"
+                     repeatCount="indefinite" />
+                <animate attributeName="cx"
+                     from="49" to="49"
+                     begin="0s" dur="2.2s"
+                     values="49;5;27;49"
+                     calcMode="linear"
+                     repeatCount="indefinite" />
+            </circle>
+        </g>
+    </g>
+</svg>

internal/webserver/static/styles.css

@@ -51,6 +51,28 @@ input, select {
     border-radius: 0.5em;
 }
 
+.server-error-msg {
+    position: fixed;
+    margin: 6em 0;
+    left: 0;
+    top: 0;
+    z-index: 1;
+    width: 100%;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+}
+.server-error-msg .error-msg-container {
+    width: 30%;
+    background-color: #fee;
+    border: 1px solid red;
+    border-radius: 1em;
+    padding: 1em;
+    color: red;
+    text-align: center;
+}
+
 ul.inline-dotted-list {
     list-style: none;
     margin: 0;
@@ -67,10 +89,39 @@ ul.inline-dotted-list li:last-child:after {
 
 .tweet {
     padding: 0 1.5em;
+    position: relative;
 }
 :not(#focused-tweet) > .tweet {
     cursor: pointer;
 }
+.htmx-spinner-container {
+    display: none;
+}
+.tweet.htmx-request .htmx-spinner-container {
+    display: revert;
+    font-size: 3em;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+}
+
+.tweet .htmx-spinner-container .htmx-spinner-background {
+    opacity: 0.3;
+    background-color: #7cc5f6;
+    width: 100%;
+    height: 100%;
+}
+.tweet .htmx-spinner-container .htmx-spinner {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%,-50%);
+
+    /* https://codepen.io/sosuke/pen/Pjoqqp */
+    filter: invert(54%) sepia(17%) saturate(4210%) hue-rotate(176deg) brightness(89%) contrast(98%);
+}
 
 .quoted-tweet {
     margin: 1em 0;

internal/webserver/tpl/http_500.tpl

@@ -0,0 +1,8 @@
+{{define "error-toast"}}
+  <div class="server-error-msg">
+    <div class="error-msg-container">
+      <span>{{.ErrorMsg}}</span>
+      <button class="suicide" onclick="htmx.remove('.server-error-msg')">X</button>
+    </div>
+  </div>
+{{end}}

internal/webserver/tpl/tweet_page_includes/single_tweet.tpl

@@ -150,5 +150,9 @@
       </div>
     </span>
   </div>
+  <div class="htmx-spinner-container">
+    <div class="htmx-spinner-background"></div>
+    <img class="svg-icon htmx-spinner" src="/static/icons/spinner.svg" />
+  </div>
 </div>
 {{end}}