From cb798c4ec15b64664b1aa7e0d729dc80a2195a91 Mon Sep 17 00:00:00 2001
From: Xevion <xevion@xevion.dev>
Date: Thu, 9 May 2024 21:45:23 -0500
Subject: [PATCH] Add proper isLoading implementation/spinning icon,
 detectedType prop stub

---
 src/components/form/LookupInput.tsx | 16 ++++++++++++----
 src/pages/index.tsx                 |  6 ++++++
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/src/components/form/LookupInput.tsx b/src/components/form/LookupInput.tsx
index c966268..521bfa8 100644
--- a/src/components/form/LookupInput.tsx
+++ b/src/components/form/LookupInput.tsx
@@ -8,6 +8,7 @@ import {
   CheckIcon,
   ChevronUpDownIcon,
   MagnifyingGlassIcon,
+  ArrowPathIcon,
 } from "@heroicons/react/20/solid";
 import { Listbox, Transition } from "@headlessui/react";
 import clsx from "clsx";
@@ -89,10 +90,17 @@ const LookupInput: FunctionComponent<LookupInputProps> = ({
   const searchIcon = (
     <>
       <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
-        <MagnifyingGlassIcon
-          className="h-5 w-5 text-zinc-400"
-          aria-hidden="true"
-        />
+        {isLoading ? (
+          <ArrowPathIcon
+            className="h-5 w-5 text-zinc-400 animate-spin"
+            aria-hidden="true"
+          />
+        ) : (
+          <MagnifyingGlassIcon
+            className="h-5 w-5 text-zinc-400"
+            aria-hidden="true"
+          />
+        )}
       </div>
     </>
   );
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 09ce04a..7b2f698 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -10,6 +10,7 @@ import ErrorCard from "@/components/common/ErrorCard";
 const Index: NextPage = () => {
   const { error, setTarget, submit } = useLookup();
   const [response, setResponse] = useState<ParsedGeneric | null>();
+  const [isLoading, setLoading] = useState<boolean>(false);
 
   return (
     <>
@@ -39,18 +40,23 @@ const Index: NextPage = () => {
       <div className="mx-auto max-w-screen-sm px-5 lg:max-w-screen-md xl:max-w-screen-lg">
         <div className="dark container mx-auto w-full py-6 md:py-12 ">
           <LookupInput
+            isLoading={isLoading}
+            detectedType={Maybe.nothing()}
             onChange={({ target, targetType }) => {
               setTarget(target);
             }}
             onSubmit={async function (props) {
               try {
+                setLoading(true);
                 const result = await submit(props);
                 if (result.isJust)
                   setResponse(result.value);
                 else
                   setResponse(null);
+                setLoading(false);
               } catch (e) {
                 setResponse(null);
+                setLoading(false);
               }
             }}
           />