Mirror/robosats
1
0
Fork 0
mirror of https://github.com/RoboSats/robosats.git synced 2025-02-20 20:29:02 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Remove animations (#460)

Browse Source 
* Remove animations

* Disable background animation on avatar load
This commit is contained in:
Reckless_Satoshi 2023-04-27 19:06:03 +00:00 committed by GitHub
parent 275a68a7f0
commit f5ae7aab34
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 27 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
frontend/src/components/RobotAvatar/index.tsx
View File

@ -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 { Avatar, Badge, Tooltip, useTheme } from '@mui/material';
import { useTranslation } from 'react-i18next';
import { SendReceiveIcon } from '../Icons';
import { apiClient } from '../../services/api';
import placeholder from './placeholder.json';
@ -23,6 +22,11 @@ interface Props {
baseUrl: string;
}
interface BackgroundData {
mime: string;
data: string;
}
const RobotAvatar: React.FC<Props> = ({
nickname,
orderType,
@ -39,22 +43,15 @@ const RobotAvatar: React.FC<Props> = ({
onLoad = () => {},
baseUrl,
}) => {
const { t } = useTranslation();
const theme = useTheme();
const [avatarSrc, setAvatarSrc] = useState<string>();
const [nicknameReady, setNicknameReady] = useState<boolean>(false);
const [activeBackground, setActiveBackground] = useState<boolean>(true);
const backgroundData =
placeholderType == 'generating' ? placeholder.generating : placeholder.loading;
const [backgroundData] = useState<BackgroundData>(
placeholderType == 'generating' ? placeholder.generating : placeholder.loading,
);
const backgroundImage = `url(data:${backgroundData.mime};base64,${backgroundData.data})`;
const className =
placeholderType == 'loading'
? theme.palette.mode === 'dark'
? 'loadingAvatarDark'
: 'loadingAvatar'
: theme.palette.mode === 'dark'
? 'generatingAvatarDark'
: 'generatingAvatar';
const className = placeholderType == 'loading' ? 'loadingAvatar' : 'generatingAvatar';
useEffect(() => {
if (nickname != undefined) {
@ -69,6 +66,7 @@ const RobotAvatar: React.FC<Props> = ({
}
} else {
setNicknameReady(false);
setActiveBackground(true);
}
}, [nickname]);
@ -85,19 +83,18 @@ const RobotAvatar: React.FC<Props> = ({
</div>
);
const getAvatar = () => {
const avatar = useMemo(() => {
if (smooth) {
return (
<div
style={{
...style,
imageRendering: 'high-quality',
backgroundSize: '100%',
borderRadius: '50%',
transform: flipHorizontally ? 'scaleX(-1)' : '',
border: '0.3px solid #55555',
filter: 'dropShadow(0.5px 0.5px 0.5px #000000)',
backgroundImage,
backgroundImage: activeBackground ? backgroundImage : '',
}}
>
<div className={className}>
@ -108,6 +105,7 @@ const RobotAvatar: React.FC<Props> = ({
border: '0.3px solid #55555',
filter: 'dropShadow(0.5px 0.5px 0.5px #000000)',
...imageStyle,
onLoad: setTimeout(() => setActiveBackground(false), 300),
}}
/>
</div>
@ -128,10 +126,10 @@ const RobotAvatar: React.FC<Props> = ({
/>
);
}
};
}, [nickname, nicknameReady, avatarSrc]);
const getAvatarWithBadges = () => {
let component = getAvatar();
const getAvatarWithBadges = useCallback(() => {
let component = avatar;
if (statusColor) {
component = (
@ -153,16 +151,17 @@ const RobotAvatar: React.FC<Props> = ({
);
}
if (tooltip) {
component = (
<Tooltip placement={tooltipPosition} enterTouchDelay={0} title={tooltip}>
{component}
</Tooltip>
);
}
return component;
};
}, [avatar]);
return tooltip ? (
<Tooltip placement={tooltipPosition} enterTouchDelay={0} title={tooltip}>
{getAvatarWithBadges()}
</Tooltip>
) : (
getAvatarWithBadges()
);
return getAvatarWithBadges();
};
export default RobotAvatar;

73
frontend/static/css/index.css
View File

@ -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 {
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,
#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 {
@ -234,32 +189,4 @@ input[type='number'] {
outline: 2px solid #555;
outline-offset: -2px;
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;
}