From d1546707bf3c419223dfee55e0661a995ce22f29 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Wed, 4 Oct 2023 15:52:25 +0200
Subject: [PATCH] fix: pdf loading

---
 src/lib/components/dropListItem.svelte        | 10 ++-
 .../billing/paymentHistory.svelte             | 72 +++++++++----------
 2 files changed, 42 insertions(+), 40 deletions(-)

diff --git a/src/lib/components/dropListItem.svelte b/src/lib/components/dropListItem.svelte
index 98d7c2676..acf02686b 100644
--- a/src/lib/components/dropListItem.svelte
+++ b/src/lib/components/dropListItem.svelte
@@ -4,6 +4,7 @@
     export let disabled = false;
     export let icon: string = null;
     export let event: string = null;
+    export let loading = false;
 
     function track() {
         if (!event) {
@@ -17,10 +18,17 @@
 </script>
 
 <li class="drop-list-item">
-    <button class="drop-button" on:click={track} on:click|preventDefault {disabled}>
+    <button
+        class="drop-button u-flex u-cross-center u-main-space-between"
+        on:click={track}
+        on:click|preventDefault
+        {disabled}>
         <span class="text"><slot /></span>
         {#if icon}
             <span class={`icon-${icon}`} aria-hidden="true" />
         {/if}
+        {#if loading}
+            <span class="loader is-small u-line-height-1-5" aria-hidden="true" />
+        {/if}
     </button>
 </li>
diff --git a/src/routes/console/organization-[organization]/billing/paymentHistory.svelte b/src/routes/console/organization-[organization]/billing/paymentHistory.svelte
index b6eead680..4494753ee 100644
--- a/src/routes/console/organization-[organization]/billing/paymentHistory.svelte
+++ b/src/routes/console/organization-[organization]/billing/paymentHistory.svelte
@@ -34,8 +34,6 @@
         invoices: [],
         total: 0
     };
-    let downloadLink: string;
-    let viewLink: string;
 
     const limit = 5;
 
@@ -43,23 +41,18 @@
         request();
     });
 
-    async function download() {
-        const response = await sdk.forConsole.billing.downloadInvoice(
+    async function fetchLinks() {
+        const view = await sdk.forConsole.billing.getInvoiceView(
             $page.params.organization,
             selectedInvoice
         );
-        console.log(response);
-        const url = pdfToURL(response.message);
-        return url;
-    }
-
-    async function view() {
-        const response = await sdk.forConsole.billing.getInvoiceView(
+        const down = await sdk.forConsole.billing.downloadInvoice(
             $page.params.organization,
             selectedInvoice
         );
-        const url = pdfToURL(response.message);
-        return url;
+        const viewURL = pdfToURL(view.message);
+        const downURL = pdfToURL(down.message);
+        return { viewURL, downURL };
     }
 
     function pdfToURL(pdf: ArrayBuffer) {
@@ -67,9 +60,9 @@
         return URL.createObjectURL(blob);
     }
 
-    function downloadInvoce() {
+    function downloadInvoce(url: string) {
         const link = document.createElement('a');
-        link.href = downloadLink;
+        link.href = url;
         link.download = `invoice-${selectedInvoice}.pdf`;
         link.click();
         URL.revokeObjectURL(link.href);
@@ -84,15 +77,6 @@
         ]);
     }
 
-    $: if (selectedInvoice) {
-        download().then((res) => {
-            downloadLink = res.toString();
-        });
-        view().then((res) => {
-            viewLink = res.toString();
-        });
-    }
-
     $: if (offset !== null) {
         request();
     }
@@ -151,21 +135,31 @@
                                         <span class="icon-dots-horizontal" aria-hidden="true" />
                                     </Button>
                                     <svelte:fragment slot="list">
-                                        <DropListLink
-                                            icon="external-link"
-                                            external
-                                            href={viewLink}
-                                            on:click={() => (showDropdown[i] = !showDropdown[i])}>
-                                            View invoice
-                                        </DropListLink>
-                                        <DropListItem
-                                            icon="download"
-                                            on:click={() => {
-                                                downloadInvoce();
-                                                showDropdown[i] = !showDropdown[i];
-                                            }}>
-                                            Download PDF
-                                        </DropListItem>
+                                        {#await fetchLinks()}
+                                            <DropListItem loading disabled>
+                                                View invoice
+                                            </DropListItem>
+                                            <DropListItem loading disabled>
+                                                Download PDF
+                                            </DropListItem>
+                                        {:then { viewURL, downURL }}
+                                            <DropListLink
+                                                icon="external-link"
+                                                external
+                                                href={viewURL}
+                                                on:click={() =>
+                                                    (showDropdown[i] = !showDropdown[i])}>
+                                                View invoice
+                                            </DropListLink>
+                                            <DropListItem
+                                                icon="download"
+                                                on:click={() => {
+                                                    downloadInvoce(downURL);
+                                                    showDropdown[i] = !showDropdown[i];
+                                                }}>
+                                                Download PDF
+                                            </DropListItem>
+                                        {/await}
                                     </svelte:fragment>
                                 </DropList>
                             </TableCell>