[FE] Add spinner to register creation

frontend/src/certs/NewRegister/RegisterPreview.tsx

@@ -6,6 +6,7 @@ import { RegisterBatchCreate } from "../../types/Register";
 import { RegistrationPreview } from ".";
 import { loadCustomLabels } from "../../utils/allCustomLabels";
 import { FileDashedIcon } from "../../icons/FileDashedIcon";
+import { LoadingIcon } from "../../icons/LoadingIcon";
 
 
 function isoDateToLocalDate(date: string): string {
@@ -65,12 +66,23 @@ export function RegisterPreview(props: {selections: Array<RegistrationPreview>,
 
                 <button
                     class="bg-c-primary text-c-on-primary px-4 py-2 rounded-full cursor-pointer mt-4
-                            disabled:opacity-50 disabled:cursor-not-allowed"
+                            disabled:opacity-50 disabled:cursor-not-allowed relative"
                     type="button"
                     disabled={props.selections.length === 0 || loading()}
                     onclick={submit}
                 >
-                    Registrar los {props.selections.length} cursos
+                    <span
+                        class="absolute top-1 left-2"
+                        style={{display: loading() ? "inline-block" : "none"}}
+                    >
+                        <LoadingIcon
+                            class="animate-spin"
+                            fill="var(--c-primary-container)"
+                        />
+                    </span>
+                    <span class="ml-6">
+                        Registrar {props.selections.length} cursos
+                    </span>
                 </button>
             </div>
         </FilledCard>
@@ -79,11 +91,11 @@ export function RegisterPreview(props: {selections: Array<RegistrationPreview>,
 
 function Register(props: {
     courseId: number,
-     date: string,
-      customLabel: string,
-       onDelete: (v: number) => void,
-        isPreview: boolean,
-    }) {
+    date: string,
+    customLabel: string,
+    onDelete: (v: number) => void,
+    isPreview: boolean,
+}) {
     const courseName = () => {
         const courses = allCourses();
         return courses.find((course) => course.course_id === props.courseId)?.course_name ?? `Curso invalido! (${props.courseId})`;