nodejs · avivkeller · May 17, 2025 · May 15, 2025
@@ -2,11 +2,7 @@ import type { ImageProps } from 'next/image';
 import Image from 'next/image';
 import type { FC } from 'react';
 
-import { isSvgImage } from '#site/util/imageUtils';
-
 const MDXImage: FC<ImageProps> = ({ width, height, alt, src, ...props }) => {
-  const isUnoptimizedImage = isSvgImage(src.toString());
-
   if (!width || !height) {
     // Since `width` and `height` are not provided in the Markdown image format,
     // we provide the height and width automatically.
@@ -15,7 +11,6 @@ const MDXImage: FC<ImageProps> = ({ width, height, alt, src, ...props }) => {
       <Image
         {...props}
         src={src}
-        unoptimized={isUnoptimizedImage}
         alt={alt}
         width={0}
         height={0}
@@ -25,16 +20,7 @@ const MDXImage: FC<ImageProps> = ({ width, height, alt, src, ...props }) => {
     );
   }
 
-  return (
-    <Image
-      {...props}
-      alt={alt}
-      width={width}
-      height={height}
-      src={src}
-      unoptimized={isUnoptimizedImage}
-    />
-  );
+  return <Image {...props} alt={alt} width={width} height={height} src={src} />;
 };
 
 export default MDXImage;
@@ -1,7 +1,6 @@
 'use client';
 
 import AvatarGroup from '@node-core/ui-components/Common/AvatarGroup';
-import Image from 'next/image';
 import type { ComponentProps, FC } from 'react';
 
 import Link from '#site/components/Link';
@@ -27,7 +26,6 @@ const WithAvatarGroup: FC<WithAvatarGroupProps> = ({
       clickable: clickable,
     })}
     as={Link}
-    img={Image}
     {...props}
   />
 );

@@ -88,6 +88,7 @@ const nextConfig = {
       '@radix-ui/react-tabs',
       '@radix-ui/react-toast',
       '@radix-ui/react-tooltip',
+      '@radix-ui/react-avatar',
       '@orama/highlight',
       '@orama/react-components',
       '@heroicons/react',

@@ -1,5 +1,6 @@
+import * as RadixAvatar from '@radix-ui/react-avatar';
 import classNames from 'classnames';
-import type { HTMLAttributes, ElementType } from 'react';
+import type { HTMLAttributes } from 'react';
 import { forwardRef } from 'react';
 
 import type { LinkLike } from '#ui/types';
@@ -14,12 +15,8 @@ export type AvatarProps = {
   size?: 'small' | 'medium';
   url?: string;
   as?: LinkLike | 'div';
-  img?: ElementType | 'img';
 };
 
-// @TODO: We temporarily removed the Avatar Radix UI primitive, since it was causing flashing
-// during initial load and not being able to render nicely when images are already cached.
-// @see https://github.com/radix-ui/primitives/pull/3008
 const Avatar = forwardRef<
   HTMLSpanElement,
   HTMLAttributes<HTMLSpanElement> & AvatarProps
@@ -33,14 +30,13 @@ const Avatar = forwardRef<
       url,
       size = 'small',
       as: Component = 'a',
-      img: Image = 'img',
       ...props
     },
     ref
   ) => {
     if (!url) Component = 'div';
     return (
-      <span
+      <RadixAvatar.Root
         {...props}
         ref={ref}
         className={classNames(styles.avatar, styles[size], props.className)}
@@ -50,25 +46,20 @@ const Avatar = forwardRef<
           target={url ? '_blank' : undefined}
           className={styles.wrapper}
         >
-          {image && (
-            <Image
-              width={40}
-              height={40}
-              loading="lazy"
-              decoding="async"
-              src={image}
-              alt={name || nickname}
-              className={styles.item}
-            />
-          )}
-
-          {!image && (
-            <span className={classNames(styles.item, styles[size])}>
-              {fallback}
-            </span>
-          )}
+          <RadixAvatar.Image
+            loading="lazy"
+            decoding="async"
+            src={image}
+            alt={name || nickname}
+            className={styles.item}
+          />
+          <RadixAvatar.Fallback
+            className={classNames(styles.item, styles[size])}
+          >
+            {fallback}
+          </RadixAvatar.Fallback>
         </Component>
-      </span>
+      </RadixAvatar.Root>
     );
   }
 );

@@ -16,7 +16,6 @@ const AvatarOverlay: FC<AvatarOverlayProps> = ({
   fallback,
   url,
   as: Component = 'a',
-  img,
 }) => (
   <Component className={styles.overlay} href={url} target="_blank">
     <Avatar
@@ -25,7 +24,6 @@ const AvatarOverlay: FC<AvatarOverlayProps> = ({
       nickname={nickname}
       fallback={fallback}
       size="medium"
-      img={img}
     />
 
     <div className={styles.user}>

@@ -1,7 +1,7 @@
 'use client';
 
 import classNames from 'classnames';
-import type { FC, ElementType } from 'react';
+import type { FC } from 'react';
 import { useState, useMemo } from 'react';
 
 import type { AvatarProps } from '#ui/Common/AvatarGroup/Avatar';
@@ -20,7 +20,6 @@ type AvatarGroupProps = {
   size?: AvatarProps['size'];
   container?: HTMLElement;
   as?: LinkLike;
-  img?: ElementType | 'img';
 };
 
 const AvatarGroup: FC<AvatarGroupProps> = ({
@@ -30,7 +29,6 @@ const AvatarGroup: FC<AvatarGroupProps> = ({
   size = 'small',
   container,
   as,
-  img,
 }) => {
   const [showMore, setShowMore] = useState(false);
 
@@ -54,7 +52,7 @@ const AvatarGroup: FC<AvatarGroupProps> = ({
           key={avatar.nickname}
           asChild
           container={container}
-          content={<AvatarOverlay {...avatar} as={as} img={img} />}
+          content={<AvatarOverlay {...avatar} as={as} />}
         >
           <Avatar
             {...avatar}
@@ -64,7 +62,6 @@ const AvatarGroup: FC<AvatarGroupProps> = ({
               'pointer-events-none': !avatar.url,
             })}
             as={as}
-            img={img}
           />
         </Tooltip>
       ))}

@@ -32,6 +32,7 @@
   },
   "dependencies": {
     "@heroicons/react": "^2.2.0",
+    "@radix-ui/react-avatar": "^1.1.9",
     "@radix-ui/react-dialog": "^1.1.7",
     "@radix-ui/react-dropdown-menu": "~2.1.6",
     "@radix-ui/react-label": "~2.1.2",