Show loading indicator while attachment is being uploaded

CHANGELOG.md

@@ -9,6 +9,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 ### Added
 
 - Detect preferred color scheme.
+- Show loading indicator while attachment is being uploaded.
 
 ## [1.21.0] - 2023-04-12
 

src/components/Loader.vue

@@ -8,18 +8,18 @@
 <style scoped lang="scss">
 /* https://github.com/loadingio/css-spinner/blob/master/dist/ripple.html */
 
-$loader-size: 80px;
-$loader-width: 4px;
-
 .loader {
-  height: $loader-size;
+  --loader-size: 80px;
+  --loader-width: 4px;
+
+  height: var(--loader-size);
   position: relative;
-  width: $loader-size;
+  width: var(--loader-size);
 }
 
 .loader div {
   animation: loader 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
-  border: $loader-width solid var(--loader-color);
+  border: var(--loader-width) solid var(--loader-color);
   border-radius: 50%;
   opacity: 1;
   position: absolute;
@@ -32,18 +32,18 @@ $loader-width: 4px;
 @keyframes loader {
   0% {
     height: 0;
-    left: calc($loader-size / 2 - $loader-width);
+    left: calc(var(--loader-size) / 2 - var(--loader-width));
     opacity: 1;
-    top: calc($loader-size / 2 - $loader-width);
+    top: calc(var(--loader-size) / 2 - var(--loader-width));
     width: 0;
   }
 
   100% {
-    height: $loader-size - $loader-width * 2;
+    height: calc(var(--loader-size) - var(--loader-width) * 2);
     left: 0;
     opacity: 0;
     top: 0;
-    width: $loader-size - $loader-width * 2;
+    width: calc(var(--loader-size) - var(--loader-width) * 2);
   }
 }
 </style>

src/components/PostEditor.vue

@@ -45,11 +45,12 @@
         <button
           type="button"
           class="icon"
-          title="Attach image"
+          title="Attach file"
           :disabled="!canAttachFile()"
           @click="selectAttachment()"
         >
-          <img src="@/assets/feather/paperclip.svg">
+          <img v-if="!isAttachmentLoading" src="@/assets/feather/paperclip.svg">
+          <loader v-else></loader>
           <input
             type="file"
             ref="attachmentUploadInputRef"
@@ -140,6 +141,7 @@ import {
 } from "@/api/posts"
 import { User } from "@/api/users"
 import Avatar from "@/components/Avatar.vue"
+import Loader from "@/components/Loader.vue"
 import PostContent from "@/components/PostContent.vue"
 import VisibilityIcon from "@/components/VisibilityIcon.vue"
 import { useInstanceInfo } from "@/composables/instance"
@@ -451,6 +453,11 @@ $line-height: 1.5;
     flex-grow: 1;
   }
 
+  .loader {
+    --loader-size: #{$icon-size};
+    --loader-width: 2px;
+  }
+
   .character-counter {
     font-weight: bold;
   }