From 2fb6ddc5f6ecd7e70f6411a846b4cda40815c81b Mon Sep 17 00:00:00 2001
From: Araozu <faraoz@unsa.edu.pe>
Date: Mon, 2 Oct 2023 21:00:35 -0500
Subject: [PATCH] [FE] Add spinner to person search

---
 backend/src/controller/person/mod.rs |  2 --
 frontend/src/certs/Search/index.tsx  | 14 ++++++++++++--
 frontend/src/icons/LoadingIcon.tsx   | 15 +++++++++++++++
 frontend/src/utils/functions.ts      |  4 ++++
 4 files changed, 31 insertions(+), 4 deletions(-)
 create mode 100644 frontend/src/icons/LoadingIcon.tsx

diff --git a/backend/src/controller/person/mod.rs b/backend/src/controller/person/mod.rs
index e5a96d7..f857f06 100644
--- a/backend/src/controller/person/mod.rs
+++ b/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;
diff --git a/frontend/src/certs/Search/index.tsx b/frontend/src/certs/Search/index.tsx
index 666e421..c187df4 100644
--- a/frontend/src/certs/Search/index.tsx
+++ b/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"
diff --git a/frontend/src/icons/LoadingIcon.tsx b/frontend/src/icons/LoadingIcon.tsx
new file mode 100644
index 0000000..313d791
--- /dev/null
+++ b/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>
+    );
+}
diff --git a/frontend/src/utils/functions.ts b/frontend/src/utils/functions.ts
index dd5bb8f..a00df62 100644
--- a/frontend/src/utils/functions.ts
+++ b/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));
+}