fix(ui): восстановить показ аватаров и корректный fallback

VERSION.properties

@@ -1,2 +1,2 @@
-client.version=1.2.9
-server.version=1.2.9
+client.version=1.2.10
+server.version=1.2.10

shine-UI/js/components/avatar-image.js

@@ -57,9 +57,13 @@ export function renderUserAvatar({
   img.alt = 'Аватар';
   img.loading = 'lazy';
   img.decoding = 'async';
-  img.hidden = true;
   wrap.append(img);
 
+  const setLoadedState = (loaded) => {
+    wrap.classList.toggle('has-image', Boolean(loaded));
+  };
+  setLoadedState(false);
+
   const gateway = state?.entrySettings?.arweaveServer;
   void getCachedAvatarObjectUrl({ gateway, txId })
     .then((objectUrl) => {
@@ -74,8 +78,7 @@ export function renderUserAvatar({
         }
       };
       img.onload = () => {
-        fallback.hidden = true;
-        img.hidden = false;
+        setLoadedState(true);
         releaseObjectUrl();
       };
       img.onerror = () => {
@@ -86,8 +89,8 @@ export function renderUserAvatar({
           return;
         }
         releaseObjectUrl();
-        img.hidden = true;
-        fallback.hidden = false;
+        img.removeAttribute('src');
+        setLoadedState(false);
       };
       img.src = objectUrl;
     })
@@ -99,17 +102,16 @@ export function renderUserAvatar({
         directUrl = '';
       }
       if (!directUrl) {
-        img.hidden = true;
-        fallback.hidden = false;
+        img.removeAttribute('src');
+        setLoadedState(false);
         return;
       }
       img.onload = () => {
-        fallback.hidden = true;
-        img.hidden = false;
+        setLoadedState(true);
       };
       img.onerror = () => {
-        img.hidden = true;
-        fallback.hidden = false;
+        img.removeAttribute('src');
+        setLoadedState(false);
       };
       img.src = directUrl;
     });

shine-UI/styles/components.css

@@ -656,11 +656,8 @@
   height: 100%;
   display: grid;
   place-items: center;
-}
-
-.avatar-fallback[hidden],
-.avatar-image img[hidden] {
-  display: none !important;
+  opacity: 1;
+  transition: opacity 120ms ease;
 }
 
 .avatar-image img,
@@ -672,6 +669,17 @@
   object-position: center;
   border-radius: 50%;
   display: block;
+  opacity: 0;
+  transition: opacity 120ms ease;
+}
+
+.avatar-image.has-image img {
+  opacity: 1;
+}
+
+.avatar-image.has-image .avatar-fallback {
+  opacity: 0;
+  visibility: hidden;
 }
 
 .meta-muted {