xevion/rdap
1
0
Fork 0
mirror of https://github.com/Xevion/rdap.git synced 2025-12-08 18:08:23 -06:00
Code Issues Packages Projects Releases Wiki Activity

Add proper isLoading implementation/spinning icon, detectedType prop stub

Browse Source
This commit is contained in:
Xevion
2024-05-09 21:45:23 -05:00
parent ec4036a45b
commit cb798c4ec1
2 changed files with 18 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/form/LookupInput.tsx
View File

@@ -8,6 +8,7 @@ import {
CheckIcon, CheckIcon,
ChevronUpDownIcon, ChevronUpDownIcon,
MagnifyingGlassIcon, MagnifyingGlassIcon,
ArrowPathIcon,
} from "@heroicons/react/20/solid"; } from "@heroicons/react/20/solid";
import { Listbox, Transition } from "@headlessui/react"; import { Listbox, Transition } from "@headlessui/react";
import clsx from "clsx"; import clsx from "clsx";
@@ -89,10 +90,17 @@ const LookupInput: FunctionComponent<LookupInputProps> = ({
const searchIcon = ( const searchIcon = (
<> <>
<div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3"> <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 <MagnifyingGlassIcon
className="h-5 w-5 text-zinc-400" className="h-5 w-5 text-zinc-400"
aria-hidden="true" aria-hidden="true"
/> />
)}
</div> </div>
</> </>
); );

6
src/pages/index.tsx
View File

@@ -10,6 +10,7 @@ import ErrorCard from "@/components/common/ErrorCard";
const Index: NextPage = () => { const Index: NextPage = () => {
const { error, setTarget, submit } = useLookup(); const { error, setTarget, submit } = useLookup();
const [response, setResponse] = useState<ParsedGeneric | null>(); const [response, setResponse] = useState<ParsedGeneric | null>();
const [isLoading, setLoading] = useState<boolean>(false);
return ( 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="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 "> <div className="dark container mx-auto w-full py-6 md:py-12 ">
<LookupInput <LookupInput
isLoading={isLoading}
detectedType={Maybe.nothing()}
onChange={({ target, targetType }) => { onChange={({ target, targetType }) => {
setTarget(target); setTarget(target);
}} }}
onSubmit={async function (props) { onSubmit={async function (props) {
try { try {
setLoading(true);
const result = await submit(props); const result = await submit(props);
if (result.isJust) if (result.isJust)
setResponse(result.value); setResponse(result.value);
else else
setResponse(null); setResponse(null);
setLoading(false);
} catch (e) { } catch (e) {
setResponse(null); setResponse(null);
setLoading(false);
} }
}} }}
/> />