Add skeleton loader to database subNavigation while tables load

[Copilot]

The subNavigation sidebar flashes "No tables yet" while tables are being fetched, creating a jarring UX when the API call takes time.

Changes

• Add loading state initialized to true, set to false after API call completes
• Import Skeleton component from @appwrite.io/pink-svelte
• Show skeleton loaders (3 rows mimicking table icon + name) during initial load
• Only show "No tables yet" after loading completes with zero results

{#if loading}
    <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>
{:else if tables?.total}
    <!-- table list -->
{:else}
    No tables yet
{/if}

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• o1.ingest.sentry.io
  • Triggering command: /opt/hostedtoolcache/node/20.19.6/x64/bin/node node /home/REDACTED/work/console/console/node_modules/.bin/../vitest/vitest.mjs run (dns block)
  • Triggering command: /opt/hostedtoolcache/node/20.19.6/x64/bin/node node build.js (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

Original prompt

On subNavigation.svelte, In src/routes/(console)/project-[region]-[project]/databases/database-[database]/subNavigation.svelte, while the tables are loading, the sub navigation shows "No tables yet". In cases where it takes a little bit of time to fetch the collections, the flash of "No tables yet" and then the data showing can be jarring.

We should show a skeleton loader while it's loading for the first time.

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[appwrite]

Console (appwrite/console)

Project ID: 688b7bf400350cbd60e9

Sites (1)

Site	Status	Logs	Preview	QR
console-stage 688b7cf6003b1842c9dc	Ready	View Logs	Preview URL

Tip

Functions can run for up to 15 minutes before timing out

[coderabbitai]

Important

Review skipped

Bot user detected.

To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[stnguyen90]

Result:

Screen.Recording.2025-12-08.at.14.07.18.mov