[FE] Add spinner to person search

backend/src/controller/person/mod.rs

@@ -1,5 +1,3 @@
-use std::fmt::format;
-
 use reqwest::Client;
 use rocket::http::Status;
 use rocket::serde::json::Json;

frontend/src/certs/Search/index.tsx

@@ -6,8 +6,9 @@ import { XIcon } from "../../icons/XIcon";
 import { Person } from "../../types/Person";
 import { PersonDisplay } from "./PersonDisplay";
 import { PersonRegister } from "./PersonRegister";
-import { backend } from "../../utils/functions";
+import { backend, wait } from "../../utils/functions";
 import { JsonResult } from "../../types/JsonResult";
+import { LoadingIcon } from "../../icons/LoadingIcon";
 
 type HTMLButtonEvent = JSX.EventHandlerUnion<HTMLButtonElement, MouseEvent>;
 
@@ -46,10 +47,12 @@ export function Search(props: {setPerson: (p: Person | null) => void}) {
     /*
       Get the user data from the DB
     */
-    const search = () => {
+    const search = async() => {
         setLoading(true);
         setError("");
 
+        await wait(1500);
+
         backend.get<JsonResult<Person>>(`/api/person/${dni()}`)
             .then((response) => {
                 if (response.status === 200) {
@@ -155,6 +158,13 @@ function InputBox(props: {
 
 
             <label for="search-dni" class="absolute -top-2 left-2 text-xs bg-c-surface px-1 select-none">DNI</label>
+
+            <span
+                class="absolute top-[2px] right-14 rounded hover:bg-c-surface-variant"
+                style={{display: props.loading ? "inline-block" : "none"}}
+            >
+                <LoadingIcon class="animate-spin" fill="var(--c-on-surface)" />
+            </span>
             <button
                 type="button"
                 class="absolute top-1 right-8 rounded hover:bg-c-surface-variant"

frontend/src/icons/LoadingIcon.tsx

@@ -0,0 +1,15 @@
+
+export function LoadingIcon(props: {fill: string, size?: number, class?: string}) {
+    return (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class={`inline-block w-6 ${props.class}`}
+            width={props.size ?? 32}
+            height={props.size ?? 32}
+            fill="none"
+            viewBox="0 0 24 24"
+        >
+            <path class="opacity-75" fill={props.fill} d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
+        </svg>
+    );
+}

frontend/src/utils/functions.ts

@@ -10,3 +10,7 @@ export function formatDate(date: string): string {
 export const backend = axios.create({
     baseURL: import.meta.env.VITE_BACKEND_URL,
 });
+
+export function wait(ms: number): Promise<void> {
+    return new Promise((resolve) => setTimeout(resolve, ms));
+}