feat: add loader to file uploads

Author: cadriel

src/components/cards/FileSystemCard.vue

@@ -51,6 +51,7 @@ import { SocketActions } from '@/socketActions'
 import DialogFileEditor from '@/components/dialogs/dialogFileEditor.vue'
 import UtilsMixin from '@/mixins/utils'
 import { KlipperFile } from '@/store/files/types'
+import { Waits } from '@/globals'
 
 @Component({
   components: {
@@ -140,15 +141,21 @@ export default class FileSystemCard extends Mixins(UtilsMixin) {
     filename = `${path}/${filename}`.substring(7)
     formData.append('file', file, filename)
     formData.append('root', root)
-    return this.$http.post(
-      this.apiUrl + '/server/files/upload',
-      formData,
-      {
-        headers: {
-          'Content-Type': 'multipart/form-data'
+    this.$store.dispatch('socket/addWait', Waits.onUploadGcode)
+    console.log('uploading, set wait', Waits.onUploadGcode)
+    return this.$http
+      .post(
+        this.apiUrl + '/server/files/upload',
+        formData, {
+          headers: {
+            'Content-Type': 'multipart/form-data'
+          }
         }
-      }
-    )
+      )
+      .finally(() => {
+        console.log('finished uploading, remove wait', Waits.onUploadGcode)
+        this.$store.dispatch('socket/removeWait', Waits.onUploadGcode)
+      })
   }
 
   saveEdit (content: string, filename: string, path: string) {

src/components/inputs/BtnFileUpload.vue

@@ -10,7 +10,14 @@
       style="display: none"
       @change="fileChanged"
     >
-    <v-btn small :color="color" @click="$refs.uploadFile.click()"><v-icon small v-if="icon">{{ icon }}</v-icon>{{ label }}</v-btn>
+    <v-btn
+      small
+      :color="color"
+      :loading="loading"
+      @click="$refs.uploadFile.click()">
+      <v-icon small v-if="icon">{{ icon }}</v-icon>
+      {{ label }}
+    </v-btn>
   </div>
 </template>
 
@@ -34,6 +41,9 @@ export default class BtnFileUpload extends Vue {
   @Prop({ type: String, required: false })
   public color!: string
 
+  @Prop({ type: Boolean })
+  public loading!: boolean
+
   fileChanged (e: Event) {
     const target = e.target as HTMLInputElement
     const files = target.files

src/components/widgets/filesystem/FileSystemBrowser.vue

@@ -54,6 +54,7 @@
             color="secondary"
             class="mr-2"
             :accept="accept"
+            :loading="hasWait(waits.onUploadGcode)"
             @file-update="uploadFile">
           </btn-file-upload>
           <v-btn

src/globals.ts

@@ -169,7 +169,8 @@ export const Waits = Object.freeze({
   onSetVelocity: 'onSetVelocity',
   onSetAcceleration: 'onSetAcceleration',
   onSetDeceleration: 'onSetDeceleration',
-  onSetSCV: 'onSetSCV'
+  onSetSCV: 'onSetSCV',
+  onUploadGcode: 'onUploadGcode'
 })
 
 export const chartConfiguration: ChartConfiguration = Object.freeze({