Commit f3cb3711 authored by Max Alekseenko's avatar Max Alekseenko

remove profile button skeleton

parent 478dbec0
import type { ButtonProps } from '@chakra-ui/react'; import type { ButtonProps } from '@chakra-ui/react';
import { Button, Skeleton, Tooltip, Box, HStack } from '@chakra-ui/react'; import { Button, Tooltip, Box, HStack } from '@chakra-ui/react';
import type { UseQueryResult } from '@tanstack/react-query'; import type { UseQueryResult } from '@tanstack/react-query';
import React from 'react'; import React from 'react';
...@@ -22,7 +22,7 @@ interface Props { ...@@ -22,7 +22,7 @@ interface Props {
isPending?: boolean; isPending?: boolean;
} }
const UserProfileButton = ({ profileQuery, size, variant, onClick, isPending }: Props, ref: React.ForwardedRef<HTMLDivElement>) => { const UserProfileButton = ({ profileQuery, size, variant, onClick, isPending }: Props, ref: React.ForwardedRef<HTMLButtonElement>) => {
const [ isFetched, setIsFetched ] = React.useState(false); const [ isFetched, setIsFetched ] = React.useState(false);
const isMobile = useIsMobile(); const isMobile = useIsMobile();
...@@ -60,6 +60,8 @@ const UserProfileButton = ({ profileQuery, size, variant, onClick, isPending }: ...@@ -60,6 +60,8 @@ const UserProfileButton = ({ profileQuery, size, variant, onClick, isPending }:
); );
})(); })();
const isButtonLoading = isPending || !isFetched;
return ( return (
<Tooltip <Tooltip
label={ <span>Sign in to My Account to add tags,<br/>create watchlists, access API keys and more</span> } label={ <span>Sign in to My Account to add tags,<br/>create watchlists, access API keys and more</span> }
...@@ -68,24 +70,23 @@ const UserProfileButton = ({ profileQuery, size, variant, onClick, isPending }: ...@@ -68,24 +70,23 @@ const UserProfileButton = ({ profileQuery, size, variant, onClick, isPending }:
isDisabled={ isMobile || isLoading || Boolean(data) } isDisabled={ isMobile || isLoading || Boolean(data) }
openDelay={ 500 } openDelay={ 500 }
> >
<Skeleton isLoaded={ isFetched } borderRadius="base" ref={ ref } w="fit-content"> <Button
<Button ref={ ref }
size={ size } size={ size }
variant={ variant } variant={ variant }
onClick={ onClick } onClick={ onClick }
onFocus={ e => e.preventDefault() } // eslint-disable-line onFocus={ e => e.preventDefault() } // eslint-disable-line
data-selected={ Boolean(data) || Boolean(web3AccountWithDomain.address) } data-selected={ !isButtonLoading && (Boolean(data) || Boolean(web3AccountWithDomain.address)) }
data-warning={ isAutoConnectDisabled } data-warning={ isAutoConnectDisabled }
fontSize="sm" fontSize="sm"
lineHeight={ 5 } lineHeight={ 5 }
px={ data ? 2.5 : 4 } px={ data ? 2.5 : 4 }
fontWeight={ data ? 700 : 600 } fontWeight={ data ? 700 : 600 }
isLoading={ isPending } isLoading={ isButtonLoading }
loadingText={ isMobile ? undefined : 'Connecting' } loadingText={ isMobile ? undefined : 'Log in' }
> >
{ content } { content }
</Button> </Button>
</Skeleton>
</Tooltip> </Tooltip>
); );
}; };
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment