Refactor Favicon component to remove unused loading state and simplify image loading logic

components/domain/favicon.tsx

@@ -20,7 +20,6 @@ export function Favicon({
   const trpc = useTRPC();
   const [isHydrated, setIsHydrated] = useState(false);
   const [failedUrl, setFailedUrl] = useState<string | null>(null);
-  const [isLoaded, setIsLoaded] = useState(false);
 
   useEffect(() => {
     setIsHydrated(true);
@@ -39,12 +38,6 @@ export function Favicon({
 
   const url = data?.url ?? null;
 
-  // Reset the fade-in state when the image URL changes to animate again
-  // biome-ignore lint/correctness/useExhaustiveDependencies: this is intentional.
-  useEffect(() => {
-    setIsLoaded(false);
-  }, [url]);
-
   if (!isHydrated || isPending) {
     return (
       <Skeleton
@@ -71,15 +64,10 @@ export function Favicon({
       alt={`${domain} icon`}
       width={size}
       height={size}
-      className={cn(
-        className,
-        "transition-opacity duration-200",
-        isLoaded ? "opacity-100" : "opacity-0",
-      )}
+      className={className}
       loading="lazy"
       unoptimized
       onError={() => setFailedUrl(url)}
-      onLoad={() => setIsLoaded(true)}
     />
   );
 }