fix and update

apps/frontend/components/family/hover-upload-avatar.tsx

@@ -3,11 +3,14 @@
 import { Camera, Loader2 } from 'lucide-react';
 import { useId } from 'react';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { Skeleton } from '@/components/ui/skeleton';
+import { useResilientBlobUrl } from '@/hooks/use-resilient-blob-url';
 import { cn } from '@/lib/utils';
 
 interface HoverUploadAvatarProps {
   name: string;
   imageUrl?: string | null;
+  imageToken?: string | null;
   uploading?: boolean;
   onFileSelect: (file: File) => void;
   className?: string;
@@ -17,12 +20,18 @@ interface HoverUploadAvatarProps {
 export function HoverUploadAvatar({
   name,
   imageUrl,
+  imageToken = null,
   uploading = false,
   onFileSelect,
   className,
   fallbackClassName
 }: HoverUploadAvatarProps) {
   const inputId = useId();
+  const { blobUrl, isLoading } = useResilientBlobUrl(imageUrl, imageToken, {
+    enabled: Boolean(imageUrl && imageToken),
+    label: `аватар ${name}`
+  });
+  const resolvedUrl = blobUrl ?? (imageToken ? null : imageUrl);
 
   return (
     <label
@@ -34,8 +43,16 @@ export function HoverUploadAvatar({
       )}
     >
       <Avatar className="h-full w-full">
-        {imageUrl ? <AvatarImage src={imageUrl} alt={name} /> : null}
-        <AvatarFallback className={fallbackClassName}>{name.slice(0, 2).toUpperCase()}</AvatarFallback>
+        {isLoading && imageUrl ? (
+          <AvatarFallback className="bg-transparent p-0">
+            <Skeleton className="h-full w-full rounded-full" />
+          </AvatarFallback>
+        ) : (
+          <>
+            {resolvedUrl ? <AvatarImage src={resolvedUrl} alt={name} /> : null}
+            <AvatarFallback className={fallbackClassName}>{name.slice(0, 2).toUpperCase()}</AvatarFallback>
+          </>
+        )}
       </Avatar>
       <span
         className={cn(