fix and update

apps/frontend/hooks/use-avatar-url.ts

@@ -4,6 +4,7 @@ import { useCallback, useEffect, useState } from 'react';
 import { useAuth } from '@/components/id/auth-provider';
 import { apiFetch } from '@/lib/api';
 import { AVATAR_UPDATED_EVENT } from '@/lib/avatar-events';
+import { useResilientBlobUrl } from '@/hooks/use-resilient-blob-url';
 
 interface AvatarAccessResponse {
   accessUrl: string;
@@ -12,41 +13,61 @@ interface AvatarAccessResponse {
 
 export function useAvatarUrl(userId: string | undefined, hasAvatar: boolean | undefined, token: string | null) {
   const { isPinLocked, isLoading } = useAuth();
-  const [avatarUrl, setAvatarUrl] = useState<string | null>(null);
+  const [accessUrl, setAccessUrl] = useState<string | null>(null);
+  const [resolvingAccessUrl, setResolvingAccessUrl] = useState(false);
 
-  const refresh = useCallback(async () => {
+  const refreshAccessUrl = useCallback(async () => {
     if (!userId || !token || !hasAvatar || isPinLocked || isLoading) {
-      setAvatarUrl(null);
+      setAccessUrl(null);
+      setResolvingAccessUrl(false);
       return;
     }
+    setResolvingAccessUrl(true);
     try {
       const response = await apiFetch<AvatarAccessResponse>(`/media/avatars/${userId}/url`, {}, token);
-      setAvatarUrl(response.accessUrl);
+      setAccessUrl(response.accessUrl);
     } catch {
-      setAvatarUrl(null);
+      setAccessUrl(null);
+    } finally {
+      setResolvingAccessUrl(false);
     }
   }, [hasAvatar, isLoading, isPinLocked, token, userId]);
 
   useEffect(() => {
-    void refresh();
+    void refreshAccessUrl();
     if (!hasAvatar) return;
     const timer = window.setInterval(() => {
-      void refresh();
+      void refreshAccessUrl();
     }, 14 * 60 * 1000);
     return () => window.clearInterval(timer);
-  }, [hasAvatar, refresh]);
+  }, [hasAvatar, refreshAccessUrl]);
 
   useEffect(() => {
     if (!userId || !hasAvatar) return;
     function handleAvatarUpdated(event: Event) {
       const detail = (event as CustomEvent<{ userId?: string }>).detail;
       if (detail?.userId === userId) {
-        void refresh();
+        void refreshAccessUrl();
       }
     }
     window.addEventListener(AVATAR_UPDATED_EVENT, handleAvatarUpdated);
     return () => window.removeEventListener(AVATAR_UPDATED_EVENT, handleAvatarUpdated);
-  }, [hasAvatar, refresh, userId]);
+  }, [hasAvatar, refreshAccessUrl, userId]);
 
-  return { avatarUrl, refreshAvatarUrl: refresh };
+  const {
+    blobUrl,
+    isLoading: isLoadingBlob,
+    hasError
+  } = useResilientBlobUrl(accessUrl, token, {
+    enabled: Boolean(hasAvatar && accessUrl && !isPinLocked && !isLoading),
+    label: `аватар ${userId ?? ''}`.trim()
+  });
+
+  const avatarUrl = blobUrl;
+  const isAvatarLoading = Boolean(hasAvatar && (resolvingAccessUrl || isLoadingBlob || (accessUrl && !blobUrl && !hasError)));
+  const refreshAvatarUrl = useCallback(async () => {
+    await refreshAccessUrl();
+  }, [refreshAccessUrl]);
+
+  return { avatarUrl, isAvatarLoading, hasAvatarError: hasError, refreshAvatarUrl };
 }