chore: set gray circle instead of text on avatar loading error

changelog.md

@@ -45,6 +45,7 @@
 - Добавлена автопауза при подготовке перевода (#1741)
 - Добавлена отдельная настройка силы приглушения оригинального звука во время перевода с адаптивной громкостью
 - Определение страны больше не задерживает появление интерфейса. Перевод и субтитры при необходимости дожидаются определения страны для получения автоматических настроек прокси
+- Изменено отображение ошибки при загрузке аватарки пользователя. Теперь, если аватарку не удалось загрузить будет показываться серый круг
 - Исправлена ошибка из-за которой при назначении нового хоткея с комбинацией клавиш, совпадающей с частью уже существующего хоткея, срабатывало действие существующего хоткея
 - Исправлена ошибка из-за которой при очистке хоткея с помощью "Esc" закрывался диалог настроек
 - Исправлена ошибка из-за которой на прямых ссылках на `.mp4` / `.webm` файлы, кнопка перевода появлялась только при наведении на видео

src/components/Account/AccountInfo.scss

@@ -21,6 +21,13 @@
     overflow: hidden;
     border-radius: 50%;
 
+    &--failed {
+      background: var(--vot-account-label-color);
+      & > .vot-account-info__avatar-img {
+        display: none;
+      }
+    }
+
     &-img {
       width: 36px;
       height: 36px;

src/components/Account/AccountInfo.tsx

@@ -18,7 +18,12 @@ export function AccountInfo(props: AccountInfoProps): JSX.Element {
           <img
             class="vot-account-info__avatar-img"
             src={props.avatarUrl}
-            alt={`Avatar of ${props.username}`}
+            alt=""
+            onerror={(e) => {
+              e.currentTarget.parentElement?.classList.add(
+                "vot-account-info__avatar--failed",
+              );
+            }}
           ></img>
         </vot-block>
         <vot-block class="vot-account-info__content">