Merge pull request #86 from Discusser/bugfix/updated-skeletons-public…

…-profile Update skeletons for public profile
s1lvax · Oct 24, 2024 · df3832b · df3832b
2 parents d4dcd07 + 18e0663
commit df3832b
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 54 deletions.
diff --git a/src/lib/components/PublicProfile/PublicProfile.svelte b/src/lib/components/PublicProfile/PublicProfile.svelte
@@ -5,7 +5,6 @@
 	import Links from '$lib/components/PublicProfile/Links.svelte';
 	import TechStack from '$lib/components/PublicProfile/TechStack.svelte';
 	import ProfileFooter from '$lib/components/PublicProfile/ProfileFooter.svelte';
-	import Hobbies from '$lib/components/PublicProfile/Hobbies.svelte';
 	import ProfileHero from '$lib/components/PublicProfile/ProfileHero.svelte';
 	import { Separator } from '$lib/components//ui/separator';
 

diff --git a/src/lib/components/PublicProfile/Socials.svelte b/src/lib/components/PublicProfile/Socials.svelte
@@ -3,6 +3,7 @@
 	import GitHub from 'lucide-svelte/icons/github';
 	import * as Table from '$lib/components/ui/table';
 	import type { GithubData } from '$lib/types/GithubData';
+	import { Skeleton } from '$lib/components/ui/skeleton';
 
 	export let githubData: GithubData | null;
 </script>
@@ -14,43 +15,58 @@
 		</Table.Row>
 	</Table.Header>
 	<Table.Body class="[&>*]:border-b-0">
-		<!-- GitHub Profile -->
-		<Table.Row>
-			<Table.Cell class="p-0">
-				<a class="flex items-center space-x-8 p-4" href={githubData?.url ?? '#'} target="_blank">
-					<GitHub />
-					<span>GitHub Profile</span>
-				</a>
-			</Table.Cell>
-		</Table.Row>
-
-		<!-- Blog Profile -->
-		{#if githubData?.blog}
+		{#if githubData}
+			<!-- GitHub Profile -->
 			<Table.Row>
 				<Table.Cell class="p-0">
-					<a class="flex items-center space-x-8 p-4" href={githubData?.blog ?? '#'} target="_blank">
-						<IdCard />
-						<span>Personal Website</span>
+					<a class="flex items-center space-x-8 p-4" href={githubData?.url ?? '#'} target="_blank">
+						<GitHub />
+						<span>GitHub Profile</span>
 					</a>
 				</Table.Cell>
 			</Table.Row>
-		{/if}
 
-		<!-- Twitter Profile -->
-		{#if githubData?.twitter}
-			<Table.Row>
-				<Table.Cell class="p-0">
-					<a
-						class="flex items-center space-x-8 p-4"
-						href={`https://x.com/${githubData?.twitter}`}
-						target="_blank"
-					>
-						<Twitter />
-						<span>Twitter Profile</span>
-					</a>
-				</Table.Cell>
-			</Table.Row>
+			<!-- Blog Profile -->
+			{#if githubData?.blog}
+				<Table.Row>
+					<Table.Cell class="p-0">
+						<a
+							class="flex items-center space-x-8 p-4"
+							href={githubData?.blog ?? '#'}
+							target="_blank"
+						>
+							<IdCard />
+							<span>Website</span>
+						</a>
+					</Table.Cell>
+				</Table.Row>
+			{/if}
+
+			<!-- Twitter Profile -->
+			{#if githubData?.twitter}
+				<Table.Row>
+					<Table.Cell class="p-0">
+						<a
+							class="flex items-center space-x-8 p-4"
+							href={`https://x.com/${githubData?.twitter}`}
+							target="_blank"
+						>
+							<Twitter />
+							<span>Twitter Profile</span>
+						</a>
+					</Table.Cell>
+				</Table.Row>
+			{/if}
+			<!-- Socials will be here when we implement it -->
+		{:else}
+			{#each { length: 2 } as _}
+				<Table.Row>
+					<Table.Cell class="flex space-x-8">
+						<Skeleton class="h-6 w-6 rounded-full" />
+						<Skeleton class="h-6 flex-grow" />
+					</Table.Cell>
+				</Table.Row>
+			{/each}
 		{/if}
-		<!-- Socials will be here when we implement it -->
 	</Table.Body>
 </Table.Root>
diff --git a/src/lib/components/PublicProfile/UserInfo.svelte b/src/lib/components/PublicProfile/UserInfo.svelte
@@ -37,30 +37,36 @@
 					</Avatar.Root>
 
 					<div class="flex flex-col items-center justify-center space-y-4 text-center">
-						{#if githubData?.name}
-							<p class="text-4xl font-bold">{githubData.name}</p>
-						{:else}
-							<p class="text-4xl font-bold">{userData.username}</p>
-						{/if}
-						<!-- Collaborating Badge -->
-						{#if userData?.isOpenToCollaborating}
-							<Badge variant="outline" class="border-green-700 text-green-700"
-								>Open to Collaborating</Badge
-							>
-						{:else}
-							<Badge variant="outline" class="border-red-700 text-red-700"
-								>Not Open to Collaborating</Badge
-							>
-						{/if}
+						{#if githubData}
+							{#if githubData?.name}
+								<p class="text-4xl font-bold">{githubData.name}</p>
+							{:else}
+								<p class="text-4xl font-bold">{userData.username}</p>
+							{/if}
+							<!-- Collaborating Badge -->
+							{#if userData?.isOpenToCollaborating}
+								<Badge variant="outline" class="border-green-700 text-green-700"
+									>Open to Collaborating</Badge
+								>
+							{:else}
+								<Badge variant="outline" class="border-red-700 text-red-700"
+									>Not Open to Collaborating</Badge
+								>
+							{/if}
 
-						{#if githubData?.bio}
-							<p class="text-muted-foreground">{githubData?.bio ?? 'Public Developer Profile'}</p>
-						{:else}
-							<p class="text-muted-foreground">Public Developer Profile</p>
-						{/if}
+							{#if githubData?.bio}
+								<p class="text-muted-foreground">{githubData?.bio ?? 'Public Developer Profile'}</p>
+							{:else}
+								<p class="text-muted-foreground">Public Developer Profile</p>
+							{/if}
 
-						{#if githubData?.company}
-							<p class="text-muted-foreground">Currently at {githubData?.company}</p>
+							{#if githubData?.company}
+								<p class="text-muted-foreground">Currently at {githubData?.company}</p>
+							{/if}
+						{:else}
+							<Skeleton class="h-10 w-[200px]" />
+							<Skeleton class="h-[22px] w-[150px] rounded-full" />
+							<Skeleton class="h-6 w-[150px]" />
 						{/if}
 					</div>
 				</div>