Skip to content

Commit

Permalink
[Glitch] Fix missing avatar fallback interfering with transparency in…
Browse files Browse the repository at this point in the history
… web UI

Port cae93e7 to glitch-soc

Signed-off-by: Claire <[email protected]>
  • Loading branch information
Gargron authored and ClearlyClaire committed Oct 7, 2024
1 parent 83b3c50 commit f669493
Show file tree
Hide file tree
Showing 2 changed files with 25 additions and 7 deletions.
25 changes: 20 additions & 5 deletions app/javascript/flavours/glitch/components/avatar.tsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
import { useState, useCallback } from 'react';

import classNames from 'classnames';

import { useHovering } from 'flavours/glitch/hooks/useHovering';
import { autoPlayGif } from 'flavours/glitch/initial_state';
import type { Account } from 'flavours/glitch/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;
Expand All @@ -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,
Expand All @@ -37,17 +40,29 @@ 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}
data-avatar-of={account && `@${account.get('acct')}`}
>
{src && <img src={src} alt='' />}
{src && !error && (
<img src={src} alt='' onLoad={handleLoad} onError={handleError} />
)}

{counter && (
<div
className='account__avatar__counter'
Expand Down
7 changes: 5 additions & 2 deletions app/javascript/flavours/glitch/styles/components.scss
Original file line number Diff line number Diff line change
Expand Up @@ -2259,7 +2259,6 @@ body > [data-popper-placement] {
display: block;
position: relative;
border-radius: var(--avatar-border-radius);
background-color: var(--surface-background-color);

img {
width: 100%;
Expand All @@ -2269,7 +2268,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;
Expand Down

0 comments on commit f669493

Please sign in to comment.