From d77f279396f22230fcae7d39b49963caa55e38d7 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sat, 6 Dec 2025 00:04:28 +0000
Subject: [PATCH 1/3] Initial plan


From ca7bea28a147559265335525b58c5ea091454800 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sat, 6 Dec 2025 00:14:10 +0000
Subject: [PATCH 2/3] feat: Add skeleton loader to subNavigation while tables
 are loading

Co-authored-by: stnguyen90 <1477010+stnguyen90@users.noreply.github.com>
---
 .../database-[database]/subNavigation.svelte  | 29 +++++++++++++++----
 1 file changed, 23 insertions(+), 6 deletions(-)

diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/subNavigation.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/subNavigation.svelte
index 4b5354ffd6..3eba31f68f 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/subNavigation.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/subNavigation.svelte
@@ -13,7 +13,8 @@
         Layout,
         Link,
         Typography,
-        Divider
+        Divider,
+        Skeleton
     } from '@appwrite.io/pink-svelte';
     import {
         IconChevronDown,
@@ -37,6 +38,7 @@
     const databaseId = $derived(page.params.database);
 
     let openBottomSheet = $state(false);
+    let loading = $state(true);
 
     let tables = $state<Models.TableList>({
         total: 0,
@@ -62,10 +64,14 @@
     const tableContentPadding = $derived($bannerSpacing ? '210px' : '140px');
 
     async function loadTables() {
-        tables = await sdk.forProject(region, project).tablesDB.listTables({
-            databaseId: databaseId,
-            queries: [Query.orderDesc(''), Query.limit(100)]
-        });
+        try {
+            tables = await sdk.forProject(region, project).tablesDB.listTables({
+                databaseId: databaseId,
+                queries: [Query.orderDesc(''), Query.limit(100)]
+            });
+        } finally {
+            loading = false;
+        }
     }
 
     onMount(() => {
@@ -94,7 +100,18 @@
                 {data.database?.name}
             </a>
             <div class="table-content" style:padding-bottom={tableContentPadding}>
-                {#if tables?.total}
+                {#if loading}
+                    <div class="u-margin-inline-start-8 u-margin-block-start-8">
+                        <Layout.Stack gap="s">
+                            {#each Array(3) as _}
+                                <Layout.Stack gap="s" direction="row" alignItems="center">
+                                    <Skeleton variant="line" width={16} height={16} />
+                                    <Skeleton variant="line" width="70%" height={16} />
+                                </Layout.Stack>
+                            {/each}
+                        </Layout.Stack>
+                    </div>
+                {:else if tables?.total}
                     <ul class="drop-list u-margin-inline-start-8 u-margin-block-start-4">
                         {#each sortedTables as table, index}
                             {@const href = `${base}/project-${region}-${project}/databases/database-${databaseId}/table-${table.$id}`}

From a531389846d8831cf27bdac9b587ff9998c7dcc6 Mon Sep 17 00:00:00 2001
From: Steven Nguyen <stnguyen90@users.noreply.github.com>
Date: Mon, 8 Dec 2025 15:48:42 -0800
Subject: [PATCH 3/3] chore: update loading skeleton to look more like real
 data.

---
 .../database-[database]/subNavigation.svelte  | 22 ++++++++++---------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/subNavigation.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/subNavigation.svelte
index 3eba31f68f..0aa8a333f0 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/subNavigation.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/subNavigation.svelte
@@ -101,16 +101,18 @@
             </a>
             <div class="table-content" style:padding-bottom={tableContentPadding}>
                 {#if loading}
-                    <div class="u-margin-inline-start-8 u-margin-block-start-8">
-                        <Layout.Stack gap="s">
-                            {#each Array(3) as _}
-                                <Layout.Stack gap="s" direction="row" alignItems="center">
-                                    <Skeleton variant="line" width={16} height={16} />
-                                    <Skeleton variant="line" width="70%" height={16} />
-                                </Layout.Stack>
-                            {/each}
-                        </Layout.Stack>
-                    </div>
+                    <ul class="drop-list u-margin-inline-start-8 u-margin-block-start-4">
+                        {#each Array(2) as _}
+                            <Layout.Stack gap="s" direction="row" alignItems="center">
+                                <li>
+                                    <div
+                                        class="u-padding-block-8 u-padding-inline-end-4 u-padding-inline-start-8 u-flex u-cross-center u-gap-8">
+                                        <Skeleton variant="line" width="70%" height={19} />
+                                    </div>
+                                </li>
+                            </Layout.Stack>
+                        {/each}
+                    </ul>
                 {:else if tables?.total}
                     <ul class="drop-list u-margin-inline-start-8 u-margin-block-start-4">
                         {#each sortedTables as table, index}