fix and update

apps/frontend/components/id/user-avatar.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { Skeleton } from '@/components/ui/skeleton';
 import { VerificationBadge } from '@/components/id/verification-badge';
 import { useAvatarUrl } from '@/hooks/use-avatar-url';
 import { cn } from '@/lib/utils';
@@ -26,7 +27,7 @@ export function UserAvatar({
   badgeSize?: 'xs' | 'sm' | 'md' | 'lg';
   fallbackClassName?: string;
 }) {
-  const { avatarUrl } = useAvatarUrl(userId, hasAvatar, token);
+  const { avatarUrl, isAvatarLoading } = useAvatarUrl(userId, hasAvatar, token);
   const initials = (displayName ?? '')
     .split(' ')
     .map((part) => part[0])
@@ -37,10 +38,18 @@ export function UserAvatar({
   return (
     <div className="relative inline-flex shrink-0">
       <Avatar className={className}>
-        {avatarUrl ? <AvatarImage src={avatarUrl} alt={displayName ?? 'Аватар'} /> : null}
-        <AvatarFallback className={cn('bg-[linear-gradient(135deg,#6f58ff,#ffd2a8)] text-xs font-semibold', fallbackClassName)}>
-          {initials.slice(0, 2)}
-        </AvatarFallback>
+        {isAvatarLoading && hasAvatar ? (
+          <AvatarFallback className="bg-transparent p-0">
+            <Skeleton className="h-full w-full rounded-full" />
+          </AvatarFallback>
+        ) : (
+          <>
+            {avatarUrl ? <AvatarImage src={avatarUrl} alt={displayName ?? 'Аватар'} /> : null}
+            <AvatarFallback className={cn('bg-[linear-gradient(135deg,#6f58ff,#ffd2a8)] text-xs font-semibold', fallbackClassName)}>
+              {initials.slice(0, 2)}
+            </AvatarFallback>
+          </>
+        )}
       </Avatar>
       {isVerified ? (
         <VerificationBadge