Merge pull request #70 from Discusser/feature/index-profile-picture-s…

…keleton Implement skeleton for avatars
s1lvax · Oct 23, 2024 · 5e3303f · 5e3303f
2 parents 16c39c6 + 3cea495
commit 5e3303f
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 3 deletions.
diff --git a/src/lib/components/PublicProfile/BasicInfo.svelte b/src/lib/components/PublicProfile/BasicInfo.svelte
@@ -17,9 +17,9 @@
 	<Avatar.Root class="h-24 w-24 rounded-full">
 		{#if githubData}
 			<Avatar.Image src={githubData.avatarUrl} alt="User Avatar" />
-			<Avatar.Fallback>?</Avatar.Fallback>
+			<Avatar.Fallback><Skeleton class="h-full w-full rounded-full" /></Avatar.Fallback>
 		{:else}
-			<Skeleton class="h-full w-full rounded-full"></Skeleton>
+			<Skeleton class="h-full w-full rounded-full" />
 		{/if}
 	</Avatar.Root>
 	<div class="flex flex-col space-y-4 text-center">

diff --git a/src/lib/components/Shared/Navbar.svelte b/src/lib/components/Shared/Navbar.svelte
@@ -8,6 +8,7 @@
 
 	import * as Avatar from '$lib/components/ui/avatar';
 	import LightDarkMode from '$lib/components/Shared/LightDarkMode.svelte';
+	import { Skeleton } from '$lib/components/ui/skeleton';
 </script>
 
 <header class="sticky top-0 z-10 items-center border-b bg-background">
@@ -26,7 +27,7 @@
 					<a href="/profile">
 						<Avatar.Root>
 							<Avatar.Image src={$page.data.session.user.image} alt="@github.user" />
-							<Avatar.Fallback>X</Avatar.Fallback>
+							<Avatar.Fallback><Skeleton class="h-full w-full rounded-full" /></Avatar.Fallback>
 						</Avatar.Root>
 					</a>
 				{/if}