Add proper isLoading implementation/spinning icon, detectedType prop stub

This commit is contained in:
2024-05-09 21:45:23 -05:00
parent ec4036a45b
commit cb798c4ec1
2 changed files with 18 additions and 4 deletions

View File

@@ -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">
{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>
</>
);

View File

@@ -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);
}
}}
/>