Improve UI while emails are being sent

themes/alps/assets/attachments.js → themes/alps/assets/compose.js

@@ -1,3 +1,11 @@
+const composeForm = document.getElementById("compose-form");
+const sendProgress = document.getElementById("send-progress");
+composeForm.addEventListener("submit", ev => {
+	[...document.querySelectorAll("input, textarea")].map(
+		i => i.setAttribute("readonly", "readonly"));
+	sendProgress.style.display = 'flex';
+});
+
 let attachments = [];
 
 const headers = document.querySelector(".create-update .headers");

themes/alps/assets/style.css

@@ -254,10 +254,48 @@ main.create-update #attachment-list .upload.error .error {
   color: red;
 }
 
-main.create-update textarea {
+main.create-update .text {
   flex: 1 auto;
   resize: none;
   margin-top: 1rem;
+  position: relative;
+}
+
+main.create-update textarea {
+  width: 100%;
+  height: 100%;
+}
+
+#send-progress {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  font-size: 1.2rem;
+  background: rgba(0, 0, 0, 0.2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+#send-progress svg {
+  height: 1.2rem;
+  margin-right: 0.3rem;
+  animation: fa-spin 2s infinite linear;
+}
+
+#send-progress svg path {
+  fill: currentColor;
+}
+
+@keyframes fa-spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(1turn);
+  }
 }
 
 main table { border-collapse: collapse; width: 100%; border: 1px solid #eee; }

themes/alps/compose.html

@@ -8,7 +8,7 @@
   <div class="container">
     <main class="create-update">
 
-      <form method="post" enctype="multipart/form-data">
+      <form method="post" enctype="multipart/form-data" id="compose-form">
         <input type="hidden" name="message_id" value="{{.Message.MessageID}}">
         <input type="hidden" name="in_reply_to" value="{{.Message.InReplyTo}}">
 
@@ -62,7 +62,13 @@
           <input type="hidden" id="attachment-uuids" name="attachment-uuids" value="" />
         </div>
 
-        <textarea name="text" class="body">{{.Message.Text}}</textarea>
+        <div class="text">
+          <textarea name="text" class="body">{{.Message.Text}}</textarea>
+          <div id="send-progress" style="display: none">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M288 39.056v16.659c0 10.804 7.281 20.159 17.686 23.066C383.204 100.434 440 171.518 440 256c0 101.689-82.295 184-184 184-101.689 0-184-82.295-184-184 0-84.47 56.786-155.564 134.312-177.219C216.719 75.874 224 66.517 224 55.712V39.064c0-15.709-14.834-27.153-30.046-23.234C86.603 43.482 7.394 141.206 8.003 257.332c.72 137.052 111.477 246.956 248.531 246.667C393.255 503.711 504 392.788 504 256c0-115.633-79.14-212.779-186.211-240.236C302.678 11.889 288 23.456 288 39.056z"/></svg>
+            <span>Sending message...</span>
+          </div>
+        </div>
 
         <datalist id="emails">
           {{range .Extra.EmailSuggestions}}
@@ -80,6 +86,6 @@
     </main>
   </div>
 </div>
-<script src="/themes/alps/assets/attachments.js"></script>
+<script src="/themes/alps/assets/compose.js"></script>
 
 {{template "foot.html"}}