From dd5d98a2430e947cfabecec231676850ab8731dc Mon Sep 17 00:00:00 2001
From: Kalle <38327916+Sendouc@users.noreply.github.com>
Date: Sat, 20 Jun 2026 14:20:17 +0300
Subject: [PATCH] Remove avatar loading state to avoid flicker

Original reason why it's there (by hfcRed): If you render someones icon, it exports it as an image and puts in the cache, so when you navigate and that same person appears again on the next page, it pulls the rendered image from the cache and uses that instead of a canvas

But could not reproduce any kind of "pop in".
---
 app/components/Avatar.module.css |  9 ---------
 app/components/Avatar.tsx        | 11 -----------
 2 files changed, 20 deletions(-)

diff --git a/app/components/Avatar.module.css b/app/components/Avatar.module.css
index 85eceb50b..c69ffc0e4 100644
--- a/app/components/Avatar.module.css
+++ b/app/components/Avatar.module.css
@@ -1,12 +1,3 @@
-.identicon {
-	filter: blur(99px);
-	transition: filter 0.3s;
-}
-
-.loaded {
-	filter: blur(0);
-}
-
 .avatarWrapper {
 	flex-shrink: 0;
 	width: fit-content;
diff --git a/app/components/Avatar.tsx b/app/components/Avatar.tsx
index aa94e09bf..1e9365d74 100644
--- a/app/components/Avatar.tsx
+++ b/app/components/Avatar.tsx
@@ -120,14 +120,8 @@ export function Avatar({
 	size: keyof typeof dimensions;
 } & React.ButtonHTMLAttributes<HTMLImageElement>) {
 	const [isErrored, setIsErrored] = React.useState(false);
-	const [loaded, setLoaded] = React.useState(false);
 	const isClient = useHydrated();
 
-	const isIdenticon =
-		!url &&
-		(!user?.customAvatarUrl || isErrored) &&
-		(!user?.discordAvatar || isErrored || identiconInput);
-
 	const identiconSource = identiconInput ?? user?.discordId ?? "unknown";
 
 	const src = url
@@ -147,17 +141,12 @@ export function Avatar({
 	return (
 		<div className={clsx(styles.avatarWrapper, className)}>
 			<img
-				className={clsx({
-					[styles.identicon]: isIdenticon,
-					[styles.loaded]: loaded,
-				})}
 				src={src}
 				alt={alt}
 				title={alt ? alt : undefined}
 				width={dimensions[size]}
 				height={dimensions[size]}
 				onError={() => setIsErrored(true)}
-				onLoad={() => setLoaded(true)}
 				{...rest}
 			/>
 		</div>