tengo que arreglar el tema de los streams

Front/src/Componentes/ModalCheckYContrato.svelte

@@ -11,7 +11,7 @@
     
     let file:File | null = $state(null);
     let confirmaGarantes: boolean = $state(false);
-
+    let clickeado: boolean = $state(false);
 
     function handleFile(e:Event):void {
         const input = e.target as HTMLInputElement;
@@ -22,7 +22,9 @@
 
     function submit() {
         if (file == null) return;
+        clickeado = true;
         onConfirm(file, men.mensaje.split(" ").reverse()[0]);
+        onClose();
     }
 </script>
 
@@ -89,8 +91,14 @@
                 </div>
             </div>
             <div class="modal-footer d-flex justify-content-between">        
-                <button class="btn btn-primary" disabled={!(confirmaGarantes && file != null)} onclick={submit} >
+                <button class="btn btn-primary" disabled={!(confirmaGarantes && file != null && clickeado == false)} onclick={submit} >
+                    {#if clickeado == false}
                     Subir
+                    {:else}
+                    <div class="spinner-border" role="status">
+                        <span class="visually-hidden">Loading...</span>
+                    </div>
+                    {/if}
                 </button>
                 <button type="button" class="btn btn-danger" onclick={onCancel}>Cancelar Contrato</button>
             </div>

Front/src/Componentes/ModalVeryAceptarContrato.svelte

@@ -0,0 +1,91 @@
+<script lang="ts">
+    import type { MensajeDto } from "../types";
+
+    let {getContrato, onConfirm, onCancel, onClose, men
+        } : {
+        getContrato:(idcontrato:number)=>void,
+        onConfirm:()=>void,
+        onCancel:()=>void,
+        onClose:()=>void,
+        men: MensajeDto
+        } = $props();
+
+    let contratoDescargado = $state(false);
+    let leiContrato:boolean = $state(false);
+
+  function descargarContrato() {
+    let idcontrato = Number(men.mensaje.split(" ").reverse()[0]);
+    getContrato(idcontrato);
+    contratoDescargado = true;
+  }
+
+  function confirmar() {
+    if (leiContrato) {
+      onConfirm();
+    }
+  }
+
+  function rechazar() {
+    if (leiContrato) {
+      onCancel();
+    }
+  }
+</script>
+
+<div class="modal show d-block" tabindex="-1">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title">Contrato</h5>
+        <button type="button" class="btn-close" onclick={onClose}></button>
+      </div>
+
+      <div class="modal-body">
+        <p>Por favor, descargue y lea el contrato antes de aceptar o rechazar.</p>
+        <div class="d-flex flex-column align-items-center">
+            <button class="btn btn-primary mb-3" onclick={descargarContrato}>
+                Descargar contrato
+            </button>
+            <div class="form-check">
+                <input
+                class="form-check-input"
+                type="checkbox"
+                id="leiContratoCheckbox"
+                bind:checked={leiContrato}
+                disabled={!contratoDescargado}
+                />
+                <label class="form-check-label" for="leiContratoCheckbox">
+                    Leí el contrato
+                </label>
+            </div>
+        </div>
+      </div>
+
+      <div class="modal-footer d-flex justify-content-between">
+        <button
+          class="btn btn-success"
+          onclick={confirmar}
+          disabled={!leiContrato}
+        >
+          Aceptar
+        </button>
+        <button
+          class="btn btn-danger"
+          onclick={rechazar}
+          disabled={!leiContrato}
+        >
+          Rechazar
+        </button>
+        <button class="btn btn-secondary" onclick={onClose}>
+          Cerrar
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+
+<style>
+  .modal {
+    background-color: rgba(0, 0, 0, 0.5); /* Fondo semi-transparente */
+  }
+</style>