Fix missing avatar fallback interfering with transparency in web UI (#32270)

This commit is contained in:
Eugen Rochko 2024-10-07 11:35:42 +02:00 committed by GitHub
parent a59160cf01
commit 1f5bd571cd
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 31 additions and 9 deletions

View file

@ -2,7 +2,7 @@
exports[`<Avatar /> Autoplay renders a animated avatar 1`] = `
<div
className="account__avatar"
className="account__avatar account__avatar--loading"
onMouseEnter={[Function]}
onMouseLeave={[Function]}
style={
@ -14,6 +14,8 @@ exports[`<Avatar /> Autoplay renders a animated avatar 1`] = `
>
<img
alt=""
onError={[Function]}
onLoad={[Function]}
src="/animated/alice.gif"
/>
</div>
@ -21,7 +23,7 @@ exports[`<Avatar /> Autoplay renders a animated avatar 1`] = `
exports[`<Avatar /> Still renders a still avatar 1`] = `
<div
className="account__avatar"
className="account__avatar account__avatar--loading"
onMouseEnter={[Function]}
onMouseLeave={[Function]}
style={
@ -33,6 +35,8 @@ exports[`<Avatar /> Still renders a still avatar 1`] = `
>
<img
alt=""
onError={[Function]}
onLoad={[Function]}
src="/static/alice.jpg"
/>
</div>

View file

@ -1,10 +1,11 @@
import { useState, useCallback } from 'react';
import classNames from 'classnames';
import { useHovering } from 'mastodon/../hooks/useHovering';
import { autoPlayGif } from 'mastodon/initial_state';
import type { Account } from 'mastodon/models/account';
import { useHovering } from '../../hooks/useHovering';
import { autoPlayGif } from '../initial_state';
interface Props {
account: Account | undefined; // FIXME: remove `undefined` once we know for sure its always there
size: number;
@ -25,6 +26,8 @@ export const Avatar: React.FC<Props> = ({
counterBorderColor,
}) => {
const { hovering, handleMouseEnter, handleMouseLeave } = useHovering(animate);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(false);
const style = {
...styleFromParent,
@ -37,16 +40,28 @@ export const Avatar: React.FC<Props> = ({
? account?.get('avatar')
: account?.get('avatar_static');
const handleLoad = useCallback(() => {
setLoading(false);
}, [setLoading]);
const handleError = useCallback(() => {
setError(true);
}, [setError]);
return (
<div
className={classNames('account__avatar', {
'account__avatar-inline': inline,
'account__avatar--inline': inline,
'account__avatar--loading': loading,
})}
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
style={style}
>
{src && <img src={src} alt='' />}
{src && !error && (
<img src={src} alt='' onLoad={handleLoad} onError={handleError} />
)}
{counter && (
<div
className='account__avatar__counter'

View file

@ -2077,7 +2077,6 @@ body > [data-popper-placement] {
display: block;
position: relative;
border-radius: var(--avatar-border-radius);
background-color: var(--surface-background-color);
img {
width: 100%;
@ -2087,7 +2086,11 @@ body > [data-popper-placement] {
display: inline-block; // to not show broken images
}
&-inline {
&--loading {
background-color: var(--surface-background-color);
}
&--inline {
display: inline-block;
vertical-align: middle;
margin-inline-end: 5px;