fix(webapp): detect avatar images that failed before hydration

Author: kathiekiwi

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

@@ -9,7 +9,7 @@ import {
   StarIcon,
 } from "@heroicons/react/20/solid";
 import type { Prisma } from "@trigger.dev/database";
-import { useState } from "react";
+import { useCallback, useState } from "react";
 import { z } from "zod";
 import { cn } from "~/utils/cn";
 
@@ -193,6 +193,13 @@ function AvatarIcon({
 function AvatarImage({ avatar, size }: { avatar: ImageAvatar; size: number }) {
   const [failed, setFailed] = useState(false);
 
+  // A server-rendered image can finish failing before hydration, so onError never fires.
+  const detectFailedLoad = useCallback((node: HTMLImageElement | null) => {
+    if (node && node.complete && node.naturalWidth === 0) {
+      setFailed(true);
+    }
+  }, []);
+
   if (!avatar.url || failed) {
     return (
       <span
@@ -207,6 +214,7 @@ function AvatarImage({ avatar, size }: { avatar: ImageAvatar; size: number }) {
   return (
     <span className="grid shrink-0 place-items-center overflow-hidden" style={styleFromSize(size)}>
       <img
+        ref={detectFailedLoad}
         src={avatar.url}
         alt="Organization avatar"
         className="size-full rounded-[10%] object-contain"