load more contacts

7 files changed, 36 insertions, 9 deletions

diff --git a/src/components/Amount.svelte b/src/components/Amount.svelte
index b2e7cd3a..0fd29755 100644
--- a/src/components/Amount.svelte
+++ b/src/components/Amount.svelte
@@ -4,7 +4,7 @@
   const { align, amount, locale, tip, rate, currency } = $props();
 </script>
 
-{#if amount}
+{#if typeof amount !== "undefined"}
   <div>
     <h2
       class="text-2xl md:text-3xl font-semibold flex items-end cursor-copy"
diff --git a/src/components/Balance.svelte b/src/components/Balance.svelte
index a80664dc..fd5ff3db 100644
--- a/src/components/Balance.svelte
+++ b/src/components/Balance.svelte
@@ -26,8 +26,9 @@
       <iconify-icon icon="ph:eye-slash-bold" width="32"></iconify-icon>
       <div class="my-auto">{$t("user.showBalance")}</div>
     </button>
-  {:else}
-
+  {:else if !isNaN(rate)}
     <Amount amount={balance} {rate} {currency} {locale} align="left" />
+  {:else}
+    <div class="text-gray-200">&mdash;</div>
   {/if}
 </div>
diff --git a/src/lib/socket.ts b/src/lib/socket.ts
index bd8494fa..2bb0d4f2 100644
--- a/src/lib/socket.ts
+++ b/src/lib/socket.ts
@@ -13,13 +13,13 @@ export const auth = () => token && send("login", token);
 
 export const send = async (type, data) => {
 	try {
-		await wait(() => socket && socket.readyState === 1, 1000, 10);
+		await wait(() => socket?.readyState === 1, 1000, 10);
 	} catch (e) {
 		const { message } = e as Error;
 		if (message === "timeout") reconnectToWebsocket();
 	}
 
-	await wait(() => socket.readyState === 1, 1000, 10);
+	await wait(() => socket?.readyState === 1, 1000, 10);
 	socket.send(JSON.stringify({ type, data }));
 };
 
diff --git a/src/locales/en.json b/src/locales/en.json
index 282d2f19..cc8637c7 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -191,6 +191,7 @@
 		"subheader": "Latest Updates"
 	},
 	"user": {
+    "loadMore": "Load more",
 		"url": "Public URL",
 		"install": "Install app",
 		"moreDetails": "Profile details",
diff --git a/src/routes/(app)/contacts/+server.ts b/src/routes/(app)/contacts/+server.ts
new file mode 100644
index 00000000..e448bda2
--- /dev/null
+++ b/src/routes/(app)/contacts/+server.ts
@@ -0,0 +1,12 @@
+import { auth, get } from "$lib/utils";
+import { json } from "@sveltejs/kit";
+
+export async function GET({ cookies }) {
+	try {
+		const contacts = await get("/contacts", auth(cookies));
+		return json(contacts);
+	} catch (e) {
+		console.log(e);
+		return json({});
+	}
+}
diff --git a/src/routes/(app)/send/[...text]/+page.server.ts b/src/routes/(app)/send/[...text]/+page.server.ts
index b0baa2d5..3bd8dff3 100644
--- a/src/routes/(app)/send/[...text]/+page.server.ts
+++ b/src/routes/(app)/send/[...text]/+page.server.ts
@@ -1,12 +1,13 @@
+import parse from "$lib/parse";
 import { auth, fd, get } from "$lib/utils";
 import { fail } from "@sveltejs/kit";
-import parse from "$lib/parse";
 
+const limit = 1;
 export async function load({ cookies, params, url }) {
 	const { text } = params;
 
 	await parse(text, url.host);
-	const contacts = await get("/contacts", auth(cookies));
+	const contacts = await get(`/contacts/${limit}`, auth(cookies));
 	return { contacts };
 }
 
diff --git a/src/routes/(app)/send/[...text]/+page.svelte b/src/routes/(app)/send/[...text]/+page.svelte
index 2ce9d538..ebc705b5 100644
--- a/src/routes/(app)/send/[...text]/+page.svelte
+++ b/src/routes/(app)/send/[...text]/+page.svelte
@@ -8,12 +8,18 @@
   import Avatar from "$comp/Avatar.svelte";
   import Icon from "$comp/Icon.svelte";
   import Spinner from "$comp/Spinner.svelte";
-  import { back, fail, focus } from "$lib/utils";
+  import { back, get, fail, focus } from "$lib/utils";
 
   let { data = $bindable(), form } = $props();
   data.subject = data.user;
 
-  let { contacts } = data;
+  let { contacts } = $state(data);
+
+  let loaded = $state();
+  let loadMore = async () => {
+    loaded = true;
+    contacts = await get("/contacts");
+  };
 
   let el = $state(),
     text = $state(),
@@ -109,4 +115,10 @@
       </div>
     </div>
   {/if}
+
+  {#if !loaded}
+    <button onclick={loadMore} type="button" class="btn"
+      >{$t("user.loadMore")}</button
+    >
+  {/if}
 </div>