diff --git a/apps/web/src/components/Basenames/UsernameProfileNotFound/index.tsx b/apps/web/src/components/Basenames/UsernameProfileNotFound/index.tsx index 34f4ee989b..c1a4a19ef5 100644 --- a/apps/web/src/components/Basenames/UsernameProfileNotFound/index.tsx +++ b/apps/web/src/components/Basenames/UsernameProfileNotFound/index.tsx @@ -3,13 +3,39 @@ import notFoundIllustration from './notFoundIllustration.svg'; import { StaticImageData } from 'next/image'; import { Button, ButtonVariants } from 'apps/web/src/components/Button/Button'; import Link from 'next/link'; -import { useSearchParams } from 'next/navigation'; +import { redirect, useSearchParams } from 'next/navigation'; import ImageWithLoading from 'apps/web/src/components/ImageWithLoading'; +import { useIsNameAvailable } from 'apps/web/src/hooks/useIsNameAvailable'; +import classNames from 'classnames'; +import { Icon } from 'libs/base-ui'; + +const spinnerWrapperClasses = classNames('flex w-full items-center justify-center'); export default function UsernameProfileNotFound() { const params = useSearchParams(); const username = params?.get('name'); + if (!username) { + redirect(`/names`); + } + const { + isLoading: isLoadingNameAvailability, + data: isNameAvailable, + isFetching, + } = useIsNameAvailable(username); + + if (isFetching && isLoadingNameAvailability) { + return ( +
+ +
+ ); + } + + if (!isFetching && !isLoadingNameAvailability && !isNameAvailable) { + redirect(`/names`); + } + const title = `${username ?? 'Name'} is not found`; const description = username ? "There's no profile associated with this name, but it could be yours!"