[Glitch] Fix missing avatar fallback interfering with transparency in web UI

Port cae93e79a4 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>

app/javascript/flavours/glitch/components/avatar.tsx

@@ -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;
@@ -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,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'

app/javascript/flavours/glitch/styles/components.scss

@@ -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%;
@@ -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;