yusur/coinstorge
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: uses pagination and subskeleton LeaderboardSearchSkeleton, replicates UserProfilePreview to reduce api calls and makes bio toggleable in UserProfilePreview

Browse source
This commit is contained in:
= 2025-07-02 14:09:10 +01:00
parent 1d7b47a0b6
commit ecb6db8069
5 changed files with 154 additions and 48 deletions
Download patch file Download diff file Expand all files Collapse all files

6
website/src/lib/components/self/UserProfilePreview.svelte
View file

@ -7,7 +7,7 @@
import { Calendar, Wallet } from 'lucide-svelte';
import type { UserProfileData } from '$lib/types/user-profile';
let { userId }: { userId: number } = $props();
let { userId, showBio = true }: { userId: number, showBio?: boolean } = $props();
let userData = $state<UserProfileData | null>(null);
let loading = $state(true);
@ -93,8 +93,8 @@
</div>
<p class="text-muted-foreground text-sm">@{profile.username}</p>
{#if profile.bio}
<p class="text-sm">{profile.bio}</p>
{#if profile.bio && showBio}
<p class="text-sm min-h-[80px]">{profile.bio}</p>
{/if}
{#if stats}

30
website/src/lib/components/self/skeletons/LeaderboardSearchSkeleton.svelte Normal file
View file

@ -0,0 +1,30 @@
<script lang="ts">
import { Skeleton } from '$lib/components/ui/skeleton';
</script>
<div class="grid gap-4 md:gap-6 xl:grid-cols-2">
<div class="flex flex-col xl:col-span-2">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
{#each Array(9) as _}
<div class="flex items-start gap-2 rounded-md border border-border bg-muted/50 transition ease duration-200 p-4">
<Skeleton class="h-14 w-14 rounded-full mr-2" />
<div class="flex flex-col flex-grow gap-2">
<Skeleton class="h-5 w-32 md:h-5 md:w-40" />
<Skeleton class="h-5 w-12 md:h-5 md:w-24" />
<div class="flex flex-col gap-2">
<div class="flex items-center justify-between">
<Skeleton class="h-5 w-12 md:h-5 md:w-20" />
<Skeleton class="h-5 w-12 md:h-5 md:w-20" />
</div>
<div class="flex items-center justify-between">
<Skeleton class="h-5 w-12 md:h-5 md:w-20" />
<Skeleton class="h-5 w-12 md:h-5 md:w-20" />
</div>
<Skeleton class="h-5 w-20 md:h-5 md:w-32" />
</div>
</div>
</div>
{/each}
</div>
</div>
</div>