fix: attriburtes racing condition between layout and page

src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/+page.svelte

@@ -9,37 +9,44 @@
     import { Container } from '$lib/layout';
     import { preferences } from '$lib/stores/preferences';
     import { wizard } from '$lib/stores/wizard';
-    import type { PageData } from './$types';
     import CreateAttributeDropdown from './attributes/createAttributeDropdown.svelte';
     import type { Option } from './attributes/store';
     import CreateAttribute from './createAttribute.svelte';
     import Create from './createDocument.svelte';
-    import { collection, columns } from './store';
+    import { columns, type Attributes } from './store';
     import Table from './table.svelte';
 
-    export let data: PageData;
+    export let data;
 
     let showCreateAttribute = false;
     let showCreateDropdown = false;
     let selectedAttribute: Option['name'] = null;
 
     $: selected = preferences.getCustomCollectionColumns($page.params.collection);
-    $: columns.set(
-        $collection.attributes.map((attribute) => ({
-            id: attribute.key,
-            title: attribute.key,
-            type: attribute.type as ColumnType,
-            show: selected?.includes(attribute.key) ?? true
-        }))
-    );
+    $: setColumns(data.collection.attributes as unknown as Attributes[]);
 
     function openWizard() {
         wizard.start(Create);
     }
 
-    $: hasAttributes = !!$collection.attributes.length;
+    function setColumns(attr: Attributes[]) {
+        columns.set(
+            attr.map((attribute) => {
+                return {
+                    id: attribute.key,
+                    title: attribute.key,
+                    type: attribute.type as ColumnType,
+                    show: selected?.includes(attribute.key) ?? true
+                };
+            })
+        );
+    }
 
-    $: hasValidAttributes = $collection?.attributes?.some((attr) => attr.status === 'available');
+    $: hasAttributes = !!data?.collection?.attributes?.length;
+
+    $: hasValidAttributes = data?.collection?.attributes?.some(
+        (attr) => (attr as unknown as Attributes).status === 'available'
+    );
 </script>
 
 <Container>

src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/+page.ts

@@ -2,15 +2,17 @@ import { Dependencies, PAGE_LIMIT } from '$lib/constants';
 import { getLimit, getPage, getQuery, getView, pageToOffset, View } from '$lib/helpers/load';
 import { sdk } from '$lib/stores/sdk';
 import { Query } from '@appwrite.io/console';
-import type { PageLoad } from './$types';
 import { queries, queryParamToMap } from '$lib/components/filters/store';
 
-export const load: PageLoad = async ({ params, depends, url, route }) => {
+export async function load({ params, depends, url, route, parent }) {
+    await parent();
     depends(Dependencies.DOCUMENTS);
-    const page = getPage(url);
+    depends(Dependencies.COLLECTION);
+
+    const navigationPage = getPage(url);
     const limit = getLimit(url, route, PAGE_LIMIT);
     const view = getView(url, route, View.Grid);
-    const offset = pageToOffset(page, limit);
+    const offset = pageToOffset(navigationPage, limit);
     const query = getQuery(url);
 
     const paramQueries = url.searchParams.get('query');
@@ -22,6 +24,10 @@ export const load: PageLoad = async ({ params, depends, url, route }) => {
         limit,
         view,
         query,
+        collection: await sdk.forProject.databases.getCollection(
+            params.database,
+            params.collection
+        ),
         documents: await sdk.forProject.databases.listDocuments(
             params.database,
             params.collection,
@@ -33,4 +39,4 @@ export const load: PageLoad = async ({ params, depends, url, route }) => {
             ]
         )
     };
-};
+}

src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/+page.svelte

@@ -17,12 +17,14 @@
     import Create from '../createAttribute.svelte';
     import { isRelationship } from '../document-[document]/attributes/store';
     import CreateIndex from '../indexes/createIndex.svelte';
-    import { attributes, type Attributes } from '../store';
+    import { type Attributes } from '../store';
     import CreateAttributeDropdown from './createAttributeDropdown.svelte';
     import Delete from './deleteAttribute.svelte';
     import Edit from './edit.svelte';
     import { attributeOptions, type Option } from './store';
 
+    export let data;
+
     const projectId = $page.params.project;
     const databaseId = $page.params.database;
 
@@ -51,7 +53,7 @@
         <CreateAttributeDropdown bind:showCreateDropdown bind:selectedOption bind:showCreate />
     </div>
 
-    {#if $attributes.length}
+    {#if data.attributes?.length}
         <Table>
             <TableHeader>
                 <TableCellHead>Key</TableCellHead>
@@ -60,7 +62,7 @@
                 <TableCellHead width={30} />
             </TableHeader>
             <TableBody>
-                {#each $attributes as attribute, index}
+                {#each data.attributes as attribute, index}
                     {@const option = attributeOptions.find(
                         (option) => option.type === attribute.type
                     )}
@@ -175,7 +177,7 @@
             </TableBody>
         </Table>
         <div class="u-flex common-section u-main-space-between">
-            <p class="text">Total results: {$attributes.length}</p>
+            <p class="text">Total results: {data.attributes.length}</p>
         </div>
     {:else}
         <Empty single target="attribute" on:click={() => (showEmptyCreateDropdown = true)}>

src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/+page.ts

@@ -0,0 +1,13 @@
+import { Dependencies } from '$lib/constants.js';
+import { sdk } from '$lib/stores/sdk.js';
+import type { Attributes } from '../store.js';
+
+export async function load({ depends, params }) {
+    depends(Dependencies.COLLECTION);
+
+    return {
+        attributes:
+            ((await sdk.forProject.databases.getCollection(params.database, params.collection))
+                ?.attributes as unknown as Attributes[]) ?? []
+    };
+}