fix: avatar fallback (#929)

Author: huntabyte

.changeset/red-mails-tease.md

@@ -0,0 +1,5 @@
+---
+"bits-ui": patch
+---
+
+fix: Avatar should render fallback if src is updated and is `null`/`undefined`

packages/bits-ui/src/lib/bits/avatar/avatar.svelte.ts

@@ -41,7 +41,7 @@ class AvatarRootState {
 		});
 	}
 
-	loadImage(src: string, crossorigin?: CrossOrigin, referrerPolicy?: ReferrerPolicy) {
+	loadImage = (src: string, crossorigin?: CrossOrigin, referrerPolicy?: ReferrerPolicy) => {
 		let imageTimerId: number;
 		const image = new Image();
 
@@ -59,9 +59,9 @@ class AvatarRootState {
 			this.loadingStatus.current = "error";
 		};
 		return () => {
-			clearTimeout(imageTimerId);
+			window.clearTimeout(imageTimerId);
 		};
-	}
+	};
 
 	props = $derived.by(
 		() =>
@@ -107,7 +107,10 @@ class AvatarImageState {
 		});
 
 		$effect.pre(() => {
-			if (!this.#src.current) return;
+			if (!this.#src.current) {
+				this.#root.loadingStatus.current = "error";
+				return;
+			}
 			// dependency on crossorigin
 			this.#crossOrigin.current;
 			untrack(() =>

sites/docs/src/lib/components/demos/avatar-demo.svelte

@@ -2,8 +2,10 @@
 	import { Avatar } from "bits-ui";
 
 	let loadingStatus = $state<Avatar.RootProps["loadingStatus"]>("loading");
+	let src = $state<string | null>("/avatar-1.png");
 </script>
 
+<button onclick={() => (src = null)}> Remove src </button>
 <Avatar.Root
 	bind:loadingStatus
 	class="h-12 w-12 rounded-full border {loadingStatus === 'loaded'
@@ -13,7 +15,7 @@
 	<div
 		class="flex h-full w-full items-center justify-center overflow-hidden rounded-full border-2 border-transparent"
 	>
-		<Avatar.Image src="/avatar-1.png" alt="@huntabyte" />
+		<Avatar.Image {src} alt="@huntabyte" />
 		<Avatar.Fallback class="border border-muted">HB</Avatar.Fallback>
 	</div>
 </Avatar.Root>