diff --git a/src/routes/(console)/project-[project]/databases/database-[database]/delete.svelte b/src/routes/(console)/project-[project]/databases/database-[database]/delete.svelte
index 93acb9b68..21c1e9316 100644
--- a/src/routes/(console)/project-[project]/databases/database-[database]/delete.svelte
+++ b/src/routes/(console)/project-[project]/databases/database-[database]/delete.svelte
@@ -10,7 +10,7 @@
     import { database } from './store';
     import { toLocaleDate } from '$lib/helpers/date';
     import { type Models, Query } from '@appwrite.io/console';
-    import { Table } from '@appwrite.io/pink-svelte';
+    import { Spinner, Table } from '@appwrite.io/pink-svelte';
 
     const databaseId = page.params.database;
 
@@ -86,6 +86,8 @@
     $: if (!showDelete) {
         collections = null;
         collectionItems = [];
+    } else {
+        listCollections();
     }
 </script>
 
@@ -98,53 +100,52 @@
             Are you sure you want to delete <b>{$database.name}</b>?
         {/if}
     </p>
-    {#await listCollections()}
+
+    {#if isLoadingDocumentsCount}
         <div class="u-flex u-main-center">
-            <div class="loader"></div>
+            <Spinner />
         </div>
-    {:then}
-        {#if error}
-            <p class="text">
-                Are you sure you want to delete <b>{$database.name}</b>?
-            </p>
-        {:else if collectionItems.length > 0}
-            <div class="u-flex-vertical u-gap-16">
-                <Table.Root columns={2} let:root>
-                    <svelte:fragment slot="header" let:root>
-                        <Table.Header.Cell {root}>Collection</Table.Header.Cell>
-                        <Table.Header.Cell {root}>Last Updated</Table.Header.Cell>
-                    </svelte:fragment>
-                    {#each collectionItems as collection}
-                        <Table.Row.Base {root}>
-                            <Table.Cell {root}>{collection.name}</Table.Cell>
-                            <Table.Cell {root}>{toLocaleDate(collection.updatedAt)}</Table.Cell>
-                        </Table.Row.Base>
-                    {/each}
-                </Table.Root>
+    {:else if error}
+        <p class="text">
+            Are you sure you want to delete <b>{$database.name}</b>?
+        </p>
+    {:else if collectionItems.length > 0}
+        <div class="u-flex-vertical u-gap-16">
+            <Table.Root columns={2} let:root>
+                <svelte:fragment slot="header" let:root>
+                    <Table.Header.Cell {root}>Collection</Table.Header.Cell>
+                    <Table.Header.Cell {root}>Last Updated</Table.Header.Cell>
+                </svelte:fragment>
+                {#each collectionItems as collection}
+                    <Table.Row.Base {root}>
+                        <Table.Cell {root}>{collection.name}</Table.Cell>
+                        <Table.Cell {root}>{toLocaleDate(collection.updatedAt)}</Table.Cell>
+                    </Table.Row.Base>
+                {/each}
+            </Table.Root>
 
-                {#if collectionItems.length < collections.total}
-                    <div class="u-flex u-gap-16 u-cross-center">
-                        <button class="u-underline" on:click={listCollections} type="button">
-                            Show more
-                        </button>
-
-                        {#if isLoadingDocumentsCount}
-                            <div class="loader is-small"></div>
-                        {/if}
-                    </div>
-                {:else if collectionItems.length > 25}
-                    <button
-                        class="u-underline"
-                        on:click={() => {
-                            collectionItems = collectionItems.slice(0, 3);
-                        }}
-                        type="button">
-                        Show less
+            {#if collectionItems.length < collections.total}
+                <div class="u-flex u-gap-16 u-cross-center">
+                    <button class="u-underline" on:click={listCollections} type="button">
+                        Show more
                     </button>
-                {/if}
-            </div>
-        {/if}
-    {/await}
+
+                    {#if isLoadingDocumentsCount}
+                        <div class="loader is-small"></div>
+                    {/if}
+                </div>
+            {:else if collectionItems.length > 25}
+                <button
+                    class="u-underline"
+                    on:click={() => {
+                        collectionItems = collectionItems.slice(0, 3);
+                    }}
+                    type="button">
+                    Show less
+                </button>
+            {/if}
+        </div>
+    {/if}
 
     {#if !isLoadingDocumentsCount}
         <p class="text" data-private>