loading placeholders

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">&mdash;</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">&mdash;</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>