Fix for the Avatar component having SSR issues. Specify the size in rems and removed the useLayoutEffect

Author: matt-aitken

apps/webapp/app/components/navigation/SideMenu.tsx

@@ -304,7 +304,7 @@ function ProjectSelector({
         )}
       >
         <span className="flex items-center gap-1.5 overflow-hidden">
-          <Avatar avatar={organization.avatar} className="size-5" />
+          <Avatar avatar={organization.avatar} size={1.25} />
           <SelectorDivider />
           <span className="truncate text-2sm font-normal text-text-bright">
             {project.name ?? "Select a project"}
@@ -319,7 +319,7 @@ function ProjectSelector({
         <div className="flex flex-col gap-2 bg-charcoal-750 p-2">
           <div className="flex items-center gap-2.5">
             <div className="box-content size-10 overflow-clip rounded-sm bg-charcoal-800">
-              <Avatar avatar={organization.avatar} className="size-10" includePadding />
+              <Avatar avatar={organization.avatar} size={2.5} includePadding />
             </div>
             <div className="space-y-0.5">
               <Paragraph variant="small/bright">{organization.title}</Paragraph>
@@ -483,7 +483,7 @@ function SwitchOrganizations({
                 key={org.id}
                 to={organizationPath(org)}
                 title={org.title}
-                icon={<Avatar className="size-4" avatar={org.avatar} />}
+                icon={<Avatar size={1} avatar={org.avatar} />}
                 leadingIconClassName="text-text-dimmed"
                 isSelected={org.id === organization.id}
               />

apps/webapp/app/components/primitives/Avatar.tsx

@@ -7,7 +7,6 @@ import {
   StarIcon,
 } from "@heroicons/react/20/solid";
 import { type Prisma } from "@trigger.dev/database";
-import { useLayoutEffect, useRef, useState } from "react";
 import { z } from "zod";
 import { useOrganization } from "~/hooks/useOrganizations";
 import { logger } from "~/services/logger.server";
@@ -53,22 +52,21 @@ export function parseAvatar(json: Prisma.JsonValue, defaultAvatar: Avatar): Avat
 
 export function Avatar({
   avatar,
-  className,
+  size,
   includePadding,
 }: {
   avatar: Avatar;
-  className?: string;
+  /** Size in rems of the icon */
+  size: number;
   includePadding?: boolean;
 }) {
   switch (avatar.type) {
     case "icon":
-      return <AvatarIcon avatar={avatar} className={className} includePadding={includePadding} />;
+      return <AvatarIcon avatar={avatar} size={size} includePadding={includePadding} />;
     case "letters":
-      return (
-        <AvatarLetters avatar={avatar} className={className} includePadding={includePadding} />
-      );
+      return <AvatarLetters avatar={avatar} size={size} includePadding={includePadding} />;
     case "image":
-      return <AvatarImage avatar={avatar} className={className} />;
+      return <AvatarImage avatar={avatar} size={size} />;
   }
 }
 
@@ -101,65 +99,48 @@ export const defaultAvatar: Avatar = {
   hex: defaultAvatarHex,
 };
 
+function styleFromSize(size: number) {
+  return {
+    width: `${size}rem`,
+    height: `${size}rem`,
+  };
+}
+
 function AvatarLetters({
   avatar,
-  className,
+  size,
   includePadding,
 }: {
   avatar: LettersAvatar;
-  className?: string;
+  size: number;
   includePadding?: boolean;
 }) {
   const organization = useOrganization();
-  const containerRef = useRef<HTMLSpanElement>(null);
-  const textRef = useRef<HTMLSpanElement>(null);
-  const [fontSize, setFontSize] = useState("1rem");
-
-  useLayoutEffect(() => {
-    if (containerRef.current) {
-      const containerWidth = containerRef.current.offsetWidth;
-      // Set font size to 60% of container width (adjust as needed)
-      setFontSize(`${containerWidth * 0.6}px`);
-    }
-
-    // Optional: Create a ResizeObserver for dynamic resizing
-    const resizeObserver = new ResizeObserver((entries) => {
-      for (const entry of entries) {
-        if (entry.target === containerRef.current) {
-          const containerWidth = entry.contentRect.width;
-          setFontSize(`${containerWidth * 0.6}px`);
-        }
-      }
-    });
-
-    if (containerRef.current) {
-      resizeObserver.observe(containerRef.current);
-    }
-
-    return () => {
-      resizeObserver.disconnect();
-    };
-  }, []);
-
   const letters = organization.title.slice(0, 2);
 
-  const classes = cn("grid place-items-center", className);
   const style = {
     backgroundColor: avatar.hex,
   };
 
+  const scaleFactor = includePadding ? 0.8 : 1;
+
   return (
-    <span className={cn("grid place-items-center overflow-hidden text-charcoal-750", classes)}>
+    <span
+      className="grid place-items-center overflow-hidden text-charcoal-750"
+      style={styleFromSize(size)}
+    >
       {/* This is the square container */}
       <span
-        ref={containerRef}
         className={cn(
           "relative grid place-items-center overflow-hidden rounded-[10%] font-semibold",
           includePadding ? "size-[80%]" : "size-[100%]"
         )}
         style={style}
       >
-        <span ref={textRef} className="font-bold leading-none" style={{ fontSize }}>
+        <span
+          className="font-bold leading-none"
+          style={{ fontSize: `${size * 0.6 * scaleFactor}rem` }}
+        >
           {letters}
         </span>
       </span>
@@ -169,29 +150,28 @@ function AvatarLetters({
 
 function AvatarIcon({
   avatar,
-  className,
+  size,
   includePadding,
 }: {
   avatar: IconAvatar;
-  className?: string;
+  size: number;
   includePadding?: boolean;
 }) {
-  const classes = cn("aspect-square", className);
   const style = {
     color: avatar.hex,
   };
 
   const IconComponent = avatarIcons[avatar.name];
   return (
-    <span className={cn("grid place-items-center", classes)}>
+    <span className="grid aspect-square place-items-center" style={styleFromSize(size)}>
       <IconComponent className={includePadding ? "size-[80%]" : "size-[100%]"} style={style} />
     </span>
   );
 }
 
-function AvatarImage({ avatar, className }: { avatar: ImageAvatar; className?: string }) {
+function AvatarImage({ avatar, size }: { avatar: ImageAvatar; size: number }) {
   return (
-    <span className="grid place-items-center">
+    <span className="grid place-items-center" style={styleFromSize(size)}>
       <img src={avatar.url} alt="Organization avatar" className="size-6" />
     </span>
   );

apps/webapp/app/routes/_app.orgs.$organizationSlug.settings._index/route.tsx

@@ -392,7 +392,7 @@ function LogoForm({ organization }: { organization: { avatar: Avatar } }) {
         <Label>Icon</Label>
         <div className="flex w-full items-end justify-between gap-2">
           <div className="grid place-items-center overflow-hidden rounded-sm border border-charcoal-750 bg-background-bright">
-            <Avatar avatar={avatar} className="size-20" includePadding />
+            <Avatar avatar={avatar} size={5} includePadding />
           </div>
           {/* Letters */}
           <Form method="post">
@@ -416,7 +416,7 @@ function LogoForm({ organization }: { organization: { avatar: Avatar } }) {
                   type: "letters",
                   hex,
                 }}
-                className="size-10"
+                size={2.5}
                 includePadding
               />
             </button>
@@ -447,7 +447,7 @@ function LogoForm({ organization }: { organization: { avatar: Avatar } }) {
                     name,
                     hex,
                   }}
-                  className="size-10"
+                  size={2.5}
                   includePadding
                 />
               </button>

apps/webapp/app/routes/storybook.avatar/route.tsx

@@ -20,7 +20,7 @@ export default function Story() {
         <h2 className="mb-4 text-lg font-semibold text-white">Size 8</h2>
         <div className="flex flex-wrap gap-2">
           {avatars.map((avatar, index) => (
-            <Avatar key={`small-${index}`} avatar={avatar} className="size-8" />
+            <Avatar key={`small-${index}`} avatar={avatar} size={2} />
           ))}
         </div>
       </div>
@@ -30,7 +30,7 @@ export default function Story() {
         <h2 className="mb-4 text-lg font-semibold text-white">Size 12</h2>
         <div className="flex flex-wrap gap-4">
           {avatars.map((avatar, index) => (
-            <Avatar key={`large-${index}`} avatar={avatar} className="size-12" />
+            <Avatar key={`large-${index}`} avatar={avatar} size={3} />
           ))}
         </div>
       </div>