implement loading indication

SecureSend/ClientApp/src/App.vue

@@ -1,5 +1,8 @@
 <script setup lang="ts">
+import { provide, ref } from "vue";
 import { RouterView } from "vue-router";
+
+provide("isLoading", ref<boolean>(false));
 </script>
 
 <template>

SecureSend/ClientApp/src/components/FileCard.vue

@@ -7,11 +7,12 @@
         <FileIcon></FileIcon>
       </div>
       <div class="flex-1 min-w-0">
-        <div class="flex justify-between gap-2">
+        <div class="flex justify-between gap-2 items-center">
           <div class="flex-1 min-w-0">
             <p class="truncate">{{ fileName }}</p>
           </div>
           <p v-if="size">{{ fileSize(size) }}</p>
+          <slot name="cardMiddle"></slot>
         </div>
 
         <slot name="cardBottom"> </slot>
@@ -23,6 +24,7 @@
 <script setup lang="ts">
 import { fileSize } from "@/utils/utils";
 import FileIcon from "@/assets/icons/FileIcon.vue";
+
 defineProps<{
   fileName: string;
   size?: number;

SecureSend/ClientApp/src/components/FileUploadForm/FileInput.vue

@@ -1,11 +1,13 @@
 <script setup lang="ts">
 import UploadIcon from "@/assets/icons/UploadIcon.vue";
 import FileCard from "../FileCard.vue";
+import LoadingIndicator from "@/components/LoadingIndicator.vue";
+import CheckIcon from "@/assets/icons/CheckIcon.vue";
 
 defineEmits(["onFielsChange"]);
 
 defineProps<{
-  files: Map<File, number | string>;
+  files: Map<File, number | string | boolean>;
 }>();
 </script>
 
@@ -40,13 +42,32 @@ defineProps<{
       :file-name="key.name"
       :size="key.size"
     >
+      <template #cardMiddle>
+        <LoadingIndicator
+          v-if="value === 100"
+          class="w-8 h-5 mr-2"
+        ></LoadingIndicator>
+        <CheckIcon v-if="value === true"></CheckIcon>
+      </template>
       <template #cardBottom>
-        <div class="w-full bg-gray-200 rounded-full dark:bg-gray-700">
+        <div class="w-full bg-gray-200 rounded-full dark:bg-gray-700 mt-2">
           <div
             class="bg-blue-600 text-xs font-medium text-blue-100 text-center p-0.5 leading-none rounded-full"
-            :style="{ width: `${value}%` }"
+            :style="{
+              width: `${
+                value === true ? 100 : typeof value === 'number' ? value : 100
+              }%`,
+            }"
           >
-            {{ value }}%
+            {{
+              typeof value === "string"
+                ? value
+                : typeof value === "number"
+                ? value === 100
+                  ? "Finishing upload..."
+                  : `${value}%`
+                : "Upload completed"
+            }}
           </div>
         </div>
       </template>

SecureSend/ClientApp/src/views/FileUploadView.vue

@@ -24,16 +24,22 @@
     >
       <StyledButton
         :type="ButtonType.primary"
-        :disabled="step === 0"
+        :disabled="step === 0 || isLoading"
         @click="step -= 1"
         >Back</StyledButton
       >
       <StyledButton
         :type="ButtonType.primary"
-        :disabled="!meta.valid"
+        :disabled="!meta.valid || isLoading"
         @click="onSubmit()"
       >
-        {{ step < 2 ? "Next" : "Upload" }}
+        <span class="flex items-center justify-center">
+          {{ step < 2 ? "Next" : "Upload" }}
+          <LoadingIndicator
+            v-if="isLoading && step !== 2"
+            class="w-5 h-5 ml-2"
+          ></LoadingIndicator>
+        </span>
       </StyledButton>
     </div>
   </div>
@@ -59,7 +65,7 @@ import SchemaInput from "@/components/FileUploadForm/SchemaInput.vue";
 import { SecureSendService } from "@/services/SecureSendService";
 import AuthenticatedSecretKeyCryptography from "@/utils/AuthenticatedSecretKeyCryptography";
 import splitFile from "@/utils/splitFile";
-import { ref } from "vue";
+import { ref, type Ref } from "vue";
 import { useForm } from "vee-validate";
 import { computed } from "vue";
 import FileInput from "@/components/FileUploadForm/FileInput.vue";
@@ -69,6 +75,8 @@ import { ButtonType } from "@/models/enums/ButtonType";
 import ConfirmModalVue from "@/components/ConfirmModal.vue";
 import { useConfirmDialog } from "@/utils/composables/useConfirmDialog";
 import SimpleInput from "@/components/SimpleInput.vue";
+import { inject } from "vue";
+import LoadingIndicator from "@/components/LoadingIndicator.vue";
 
 interface IMappedFormValues {
   expiryDate: string;
@@ -84,6 +92,8 @@ const step = ref<number>(0);
 
 let downloadUrl: string;
 
+const isLoading = inject<Ref<boolean>>("isLoading");
+
 const stepZeroschema = {
   password(value: string) {
     if (value) return true;
@@ -119,11 +129,15 @@ const { handleSubmit, meta, resetForm } = useForm({
 
 const onSubmit = handleSubmit(async (values: IMappedFormValues) => {
   if (step.value === 1) {
+    isLoading!.value = true;
     await SecureSendService.createSecureUpload(uuid);
+    isLoading!.value = false;
   } else if (step.value === 2) {
+    isLoading!.value = true;
     keychain = new AuthenticatedSecretKeyCryptography(values.password, salt);
     await keychain.start();
     await encryptFile();
+    isLoading!.value = false;
     const { data } = await reveal();
     console.log(data);
     if (data) {
@@ -141,7 +155,7 @@ const copyToClipboard = () => navigator.clipboard.writeText(downloadUrl);
 const uuid = self.crypto.randomUUID();
 const uploadStatus = ref<number>();
 
-const files = ref(new Map<File, number | string>());
+const files = ref(new Map<File, number | string | boolean>());
 
 const onFilesChange = (event: any) => {
   files.value.clear();
@@ -177,7 +191,12 @@ const encryptFile = async () => {
             chunk,
             file.type
           );
-          files.value.set(file, Math.ceil(((num + 1) / totalChunks) * 100));
+          files.value.set(
+            file,
+            num + 1 === totalChunks
+              ? true
+              : Math.ceil(((num + 1) / totalChunks) * 100)
+          );
         } catch (error) {
           files.value.set(file, "Error with uploading file");
           throw error;