Added lib to compress image into jpeg before send on backend

src/app/components/challenge-card/challenge-card.component.ts

@@ -1,5 +1,5 @@
 import {Component, inject, input, signal, viewChild} from '@angular/core';
-import {IonicModule, ToastController} from "@ionic/angular";
+import {IonicModule, LoadingController, ToastController} from "@ionic/angular";
 import {GetRandomChallengeDto, RandomchallengesService} from "../../services/api";
 import {firstValueFrom} from "rxjs";
 import {TooltipComponent} from "../tooltip/tooltip.component";
@@ -19,6 +19,7 @@ import {SignOnFormComponent} from "../sign-on-form/sign-on-form.component";
 export class ChallengeCardComponent {
     private randomChallengesService = inject(RandomchallengesService);
     private toastCtrl = inject(ToastController);
+    private loadCtrl = inject(LoadingController);
 
     action = input.required<string>();
     tag = input.required<string>();
@@ -34,8 +35,26 @@ export class ChallengeCardComponent {
     }
 
     async sendProof(randomChallengeId: number) {
+        const file = this.proof().proofForm.value.proof;
+
+        if (!file) {
+            const toast = await this.toastCtrl.create({
+                message: 'Aucune preuve n\'a été déposée',
+                duration: 2000,
+                color: 'danger'
+            });
+            await toast.present();
+            return;
+        }
+
+        const loading = await this.loadCtrl.create({
+            message: 'Chargement...',
+            spinner: 'lines-sharp-small'
+        });
+        await loading.present();
+
         try {
-            await firstValueFrom(this.randomChallengesService.patchProofEndpoint(randomChallengeId, this.proof().proofForm.value.proof));
+            await firstValueFrom(this.randomChallengesService.patchProofEndpoint(randomChallengeId, file));
 
             this.isModalOpen = false;
             const toast = await this.toastCtrl.create({
@@ -45,6 +64,7 @@ export class ChallengeCardComponent {
             });
             await toast.present();
         } catch {
+            this.isModalOpen = false;
             const toast = await this.toastCtrl.create({
                 message: 'Tu as déjà déposé une preuve pour ce défi',
                 duration: 2000,
@@ -52,5 +72,6 @@ export class ChallengeCardComponent {
             });
             await toast.present();
         }
+        await loading.dismiss();
     }
 }