mirror of
https://github.com/RoboSats/robosats.git
synced 2025-02-21 12:49:02 +00:00
Remove animations (#460)
* Remove animations * Disable background animation on avatar load
This commit is contained in:
parent
275a68a7f0
commit
f5ae7aab34
@ -1,7 +1,6 @@
|
|||||||
import React, { useEffect, useState } from 'react';
|
import React, { useCallback, useEffect, useMemo, useState } from 'react';
|
||||||
import SmoothImage from 'react-smooth-image';
|
import SmoothImage from 'react-smooth-image';
|
||||||
import { Avatar, Badge, Tooltip, useTheme } from '@mui/material';
|
import { Avatar, Badge, Tooltip, useTheme } from '@mui/material';
|
||||||
import { useTranslation } from 'react-i18next';
|
|
||||||
import { SendReceiveIcon } from '../Icons';
|
import { SendReceiveIcon } from '../Icons';
|
||||||
import { apiClient } from '../../services/api';
|
import { apiClient } from '../../services/api';
|
||||||
import placeholder from './placeholder.json';
|
import placeholder from './placeholder.json';
|
||||||
@ -23,6 +22,11 @@ interface Props {
|
|||||||
baseUrl: string;
|
baseUrl: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
interface BackgroundData {
|
||||||
|
mime: string;
|
||||||
|
data: string;
|
||||||
|
}
|
||||||
|
|
||||||
const RobotAvatar: React.FC<Props> = ({
|
const RobotAvatar: React.FC<Props> = ({
|
||||||
nickname,
|
nickname,
|
||||||
orderType,
|
orderType,
|
||||||
@ -39,22 +43,15 @@ const RobotAvatar: React.FC<Props> = ({
|
|||||||
onLoad = () => {},
|
onLoad = () => {},
|
||||||
baseUrl,
|
baseUrl,
|
||||||
}) => {
|
}) => {
|
||||||
const { t } = useTranslation();
|
|
||||||
const theme = useTheme();
|
|
||||||
const [avatarSrc, setAvatarSrc] = useState<string>();
|
const [avatarSrc, setAvatarSrc] = useState<string>();
|
||||||
const [nicknameReady, setNicknameReady] = useState<boolean>(false);
|
const [nicknameReady, setNicknameReady] = useState<boolean>(false);
|
||||||
|
const [activeBackground, setActiveBackground] = useState<boolean>(true);
|
||||||
|
|
||||||
const backgroundData =
|
const [backgroundData] = useState<BackgroundData>(
|
||||||
placeholderType == 'generating' ? placeholder.generating : placeholder.loading;
|
placeholderType == 'generating' ? placeholder.generating : placeholder.loading,
|
||||||
|
);
|
||||||
const backgroundImage = `url(data:${backgroundData.mime};base64,${backgroundData.data})`;
|
const backgroundImage = `url(data:${backgroundData.mime};base64,${backgroundData.data})`;
|
||||||
const className =
|
const className = placeholderType == 'loading' ? 'loadingAvatar' : 'generatingAvatar';
|
||||||
placeholderType == 'loading'
|
|
||||||
? theme.palette.mode === 'dark'
|
|
||||||
? 'loadingAvatarDark'
|
|
||||||
: 'loadingAvatar'
|
|
||||||
: theme.palette.mode === 'dark'
|
|
||||||
? 'generatingAvatarDark'
|
|
||||||
: 'generatingAvatar';
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (nickname != undefined) {
|
if (nickname != undefined) {
|
||||||
@ -69,6 +66,7 @@ const RobotAvatar: React.FC<Props> = ({
|
|||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
setNicknameReady(false);
|
setNicknameReady(false);
|
||||||
|
setActiveBackground(true);
|
||||||
}
|
}
|
||||||
}, [nickname]);
|
}, [nickname]);
|
||||||
|
|
||||||
@ -85,19 +83,18 @@ const RobotAvatar: React.FC<Props> = ({
|
|||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
||||||
const getAvatar = () => {
|
const avatar = useMemo(() => {
|
||||||
if (smooth) {
|
if (smooth) {
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
...style,
|
...style,
|
||||||
imageRendering: 'high-quality',
|
|
||||||
backgroundSize: '100%',
|
backgroundSize: '100%',
|
||||||
borderRadius: '50%',
|
borderRadius: '50%',
|
||||||
transform: flipHorizontally ? 'scaleX(-1)' : '',
|
transform: flipHorizontally ? 'scaleX(-1)' : '',
|
||||||
border: '0.3px solid #55555',
|
border: '0.3px solid #55555',
|
||||||
filter: 'dropShadow(0.5px 0.5px 0.5px #000000)',
|
filter: 'dropShadow(0.5px 0.5px 0.5px #000000)',
|
||||||
backgroundImage,
|
backgroundImage: activeBackground ? backgroundImage : '',
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div className={className}>
|
<div className={className}>
|
||||||
@ -108,6 +105,7 @@ const RobotAvatar: React.FC<Props> = ({
|
|||||||
border: '0.3px solid #55555',
|
border: '0.3px solid #55555',
|
||||||
filter: 'dropShadow(0.5px 0.5px 0.5px #000000)',
|
filter: 'dropShadow(0.5px 0.5px 0.5px #000000)',
|
||||||
...imageStyle,
|
...imageStyle,
|
||||||
|
onLoad: setTimeout(() => setActiveBackground(false), 300),
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
@ -128,10 +126,10 @@ const RobotAvatar: React.FC<Props> = ({
|
|||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
};
|
}, [nickname, nicknameReady, avatarSrc]);
|
||||||
|
|
||||||
const getAvatarWithBadges = () => {
|
const getAvatarWithBadges = useCallback(() => {
|
||||||
let component = getAvatar();
|
let component = avatar;
|
||||||
|
|
||||||
if (statusColor) {
|
if (statusColor) {
|
||||||
component = (
|
component = (
|
||||||
@ -153,16 +151,17 @@ const RobotAvatar: React.FC<Props> = ({
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (tooltip) {
|
||||||
|
component = (
|
||||||
|
<Tooltip placement={tooltipPosition} enterTouchDelay={0} title={tooltip}>
|
||||||
|
{component}
|
||||||
|
</Tooltip>
|
||||||
|
);
|
||||||
|
}
|
||||||
return component;
|
return component;
|
||||||
};
|
}, [avatar]);
|
||||||
|
|
||||||
return tooltip ? (
|
return getAvatarWithBadges();
|
||||||
<Tooltip placement={tooltipPosition} enterTouchDelay={0} title={tooltip}>
|
|
||||||
{getAvatarWithBadges()}
|
|
||||||
</Tooltip>
|
|
||||||
) : (
|
|
||||||
getAvatarWithBadges()
|
|
||||||
);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export default RobotAvatar;
|
export default RobotAvatar;
|
||||||
|
@ -176,56 +176,11 @@ input[type='number'] {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes animatedLoadingBackground {
|
|
||||||
from {
|
|
||||||
background-position: 0 0;
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
background-position: 0 80px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes animatedGeneratingBackground {
|
|
||||||
from {
|
|
||||||
background-position: 0 0;
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
background-position: 0 200px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.loadingAvatar {
|
.loadingAvatar {
|
||||||
background-size: 100%;
|
background-size: 100%;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
border: 0.3px solid #555;
|
border: 0.3px solid #555;
|
||||||
filter: dropShadow(0.5px 0.5px 0.5px #000000);
|
filter: dropShadow(0.5px 0.5px 0.5px #000000);
|
||||||
background-image: linear-gradient(
|
|
||||||
0deg,
|
|
||||||
#ffffffab 0%,
|
|
||||||
#cfcfcfc2 40%,
|
|
||||||
#a3a3a3cc 60%,
|
|
||||||
#ffffffab 100%
|
|
||||||
);
|
|
||||||
background-position: 0px 0px;
|
|
||||||
background-repeat: repeat;
|
|
||||||
animation: animatedLoadingBackground 5s linear infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
.loadingAvatarDark {
|
|
||||||
background-size: 100%;
|
|
||||||
border-radius: 50%;
|
|
||||||
border: 0.3px solid #555;
|
|
||||||
filter: dropShadow(0.5px 0.5px 0.5px #000000);
|
|
||||||
background-image: linear-gradient(
|
|
||||||
0deg,
|
|
||||||
#6e6e6ec2 0%,
|
|
||||||
#14141479 40%,
|
|
||||||
#14141479 60%,
|
|
||||||
#6e6e6ec2 100%
|
|
||||||
);
|
|
||||||
background-position: 0px 0px;
|
|
||||||
background-repeat: repeat;
|
|
||||||
animation: animatedLoadingBackground 5s linear infinite;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.generatingAvatar {
|
.generatingAvatar {
|
||||||
@ -234,32 +189,4 @@ input[type='number'] {
|
|||||||
outline: 2px solid #555;
|
outline: 2px solid #555;
|
||||||
outline-offset: -2px;
|
outline-offset: -2px;
|
||||||
filter: dropShadow(1px 1px 1px #000000);
|
filter: dropShadow(1px 1px 1px #000000);
|
||||||
background-image: linear-gradient(
|
|
||||||
0deg,
|
|
||||||
#ffffff00 0%,
|
|
||||||
#dbdbdb93 40%,
|
|
||||||
#f7f7f791 60%,
|
|
||||||
#ffffff00 100%
|
|
||||||
);
|
|
||||||
background-position: 0px 0px;
|
|
||||||
background-repeat: repeat;
|
|
||||||
animation: animatedGeneratingBackground 5s linear infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
.generatingAvatarDark {
|
|
||||||
background-size: 100%;
|
|
||||||
border-radius: 50%;
|
|
||||||
outline: 2px solid #555;
|
|
||||||
outline-offset: -2px;
|
|
||||||
filter: dropShadow(1px 1px 1px #000000);
|
|
||||||
background-image: linear-gradient(
|
|
||||||
0deg,
|
|
||||||
#6e6e6e00 0%,
|
|
||||||
#14141479 40%,
|
|
||||||
#14141479 60%,
|
|
||||||
#6e6e6e00 100%
|
|
||||||
);
|
|
||||||
background-position: 0px 0px;
|
|
||||||
background-repeat: repeat;
|
|
||||||
animation: animatedGeneratingBackground 5s linear infinite;
|
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user