diff options
3 files changed, 47 insertions, 52 deletions
diff --git a/src/routes/(app)/[username]/(profile)/+layout.svelte b/src/routes/(app)/[username]/(profile)/+layout.svelte index 02eaa7ad..851cc7a4 100644 --- a/src/routes/(app)/[username]/(profile)/+layout.svelte +++ b/src/routes/(app)/[username]/(profile)/+layout.svelte @@ -13,23 +13,14 @@ let { encode, toWords } = bech32m; - let { - events, - user, - subject, - src, - rates, - text, - count, - follows, - followers, - followList, - } = data; + let { events, user, subject, src, rates, text, count, follows, followList } = + data; let { currency, npub, username: n, display } = subject; $: refresh(data); let refresh = (data) => { - ({ events, user, subject, src, rates, text } = data); + ({ events, user, subject, src, rates, text, follows, count, followList } = + data); ({ currency, npub, username: n, display } = subject); }; @@ -140,13 +131,19 @@ <div> <div class="flex justify-center gap-2"> <a href={`/${subject.pubkey}/follows`} data-sveltekit-preload-data="tap" - ><b>{#await follows then f}{si(f.length)}{/await}</b> + ><b + >{#await follows}<span class="text-secondary">—</span + >{:then f}{si(f.length)}{/await}</b + > <span class="text-secondary">{$t("user.following")}</span></a > <a href={`/${subject.pubkey}/followers`} data-sveltekit-preload-data="tap" - ><b>{#await count then c}{si(c)}{/await}</b> + ><b + >{#await count}<span class="text-secondary">—</span + >{:then c}{si(c)}{/await}</b + > <span class="text-secondary">{$t("user.followers")}</span></a > </div> @@ -219,7 +216,7 @@ {#if user && user.username !== subject.username && subject.pubkey} {#if following} <button - class="mx-auto rounded-2xl border py-5 px-6 font-bold hover:opacity-80 flex bg-black text-white grow" + class="mx-auto rounded-2xl border py-4 px-5 font-bold hover:opacity-80 flex bg-black text-white grow" on:click={unfollow} > <div class="mx-auto flex"> @@ -269,8 +266,8 @@ </div> </div> - <div class="w-full"> - <div class="mx-auto space-y-5 lg:max-w-xl lg:pl-10 xl:max-w-2xl lg:pl-10"> + <div class="w-full mt-5"> + <div class="mx-auto space-y-5 lg:max-w-xl xl:max-w-2xl lg:pl-10"> <slot /> </div> </div> diff --git a/src/routes/(app)/[username]/(profile)/followers/+page.svelte b/src/routes/(app)/[username]/(profile)/followers/+page.svelte index d1e808d6..12ab914c 100644 --- a/src/routes/(app)/[username]/(profile)/followers/+page.svelte +++ b/src/routes/(app)/[username]/(profile)/followers/+page.svelte @@ -5,21 +5,17 @@ import VirtualScroll from "svelte-virtual-scroll-list"; export let data; - let { - subject: { followers }, - } = data; - - let w; + let { followers } = data; </script> -<svelte:window bind:innerWidth={w} /> - -<div class="px-3 md:px-0 w-full md:w-[400px] mx-auto space-y-8"> +<div class="px-3 md:px-0 w-full md:w-[400px] mx-auto space-y-5"> <h1 class="px-3 md:px-0 text-center text-3xl md:text-4xl font-semibold"> {$t("user.followers")} </h1> - {#if browser} + {#await followers} + <div>Loading followers...</div> + {:then followers} {#if followers.length} <VirtualScroll data={followers} key="pubkey" let:data pageMode={true}> <a href={`/${data.pubkey}`} data-sveltekit-preload-data="tap"> @@ -48,5 +44,5 @@ {:else} <div>No followers</div> {/if} - {/if} + {/await} </div> diff --git a/src/routes/(app)/[username]/(profile)/follows/+page.svelte b/src/routes/(app)/[username]/(profile)/follows/+page.svelte index b1975544..240b52b8 100644 --- a/src/routes/(app)/[username]/(profile)/follows/+page.svelte +++ b/src/routes/(app)/[username]/(profile)/follows/+page.svelte @@ -7,11 +7,9 @@ import { invalidate } from "$app/navigation"; export let data; - let { follows } = data; $: refresh(data); let refresh = (data) => ({ follows } = data); - </script> <div class="px-3 md:px-0 w-full md:w-[400px] mx-auto"> @@ -19,31 +17,35 @@ {$t("user.following")} </h1> - {#if follows.length} - {#if browser} - <VirtualScroll data={follows} key="pubkey" let:data pageMode={true}> - <a href={`/${data.pubkey}`} data-sveltekit-preload-data="tap"> - <div class="flex py-4 text-lg text-secondary" :key={data.pubkey}> - <div class="mb-auto mr-2"> - <div class="md:hidden"> - <Avatar size={12} user={data} disabled={true} /> + {#await follows} + <div>Loading</div> + {:then follows} + {#if follows.length} + {#if browser} + <VirtualScroll data={follows} key="pubkey" let:data pageMode={true}> + <a href={`/${data.pubkey}`} data-sveltekit-preload-data="tap"> + <div class="flex py-4 text-lg text-secondary" :key={data.pubkey}> + <div class="mb-auto mr-2"> + <div class="md:hidden"> + <Avatar size={12} user={data} disabled={true} /> + </div> + <div class="hidden md:block"> + <Avatar size={20} user={data} disabled={true} /> + </div> </div> - <div class="hidden md:block"> - <Avatar size={20} user={data} disabled={true} /> - </div> - </div> - <div class="w-full flex pb-1 text-black my-auto"> - <div> - <div>{data.display_name || ""}</div> - <div class="text-secondary text-base">@{data.name}</div> + <div class="w-full flex pb-1 text-black my-auto"> + <div> + <div>{data.display_name || ""}</div> + <div class="text-secondary text-base">@{data.name}</div> + </div> </div> </div> - </div> - </a> - </VirtualScroll> + </a> + </VirtualScroll> + {/if} + {:else} + <div>No follows</div> {/if} - {:else} - <div>No follows</div> - {/if} + {/await} </div> |