fix: missing files.

src/lib/components/columnSelector.svelte

@@ -195,16 +195,17 @@
                                 bind:value={search} />
 
                             <Layout.Stack
+                                gap="s"
                                 direction="row"
                                 alignItems="center"
                                 style="padding-block-end: 0.5rem">
-                                <Button icon extraCompact on:click={selectAll}>Select all</Button>
+                                <Button size="xs" icon extraCompact on:click={selectAll}>Select all</Button>
 
                                 <div style:height="1rem">
                                     <Divider vertical />
                                 </div>
 
-                                <Button icon extraCompact on:click={deselectAll}
+                                <Button size="xs" icon extraCompact on:click={deselectAll}
                                     >Deselect all</Button>
                             </Layout.Stack>
                         </Layout.Stack>

src/lib/components/customId.svelte

@@ -11,13 +11,15 @@
         name,
         id = $bindable(null),
         autofocus = true,
-        isProject = false
+        isProject = false,
+        required = true,
     }: {
         show: boolean;
         name: string;
         id: string;
         autofocus?: boolean;
         isProject?: boolean;
+        required?: boolean;
     } = $props();
 
     $effect(() => {
@@ -32,6 +34,8 @@
         if (show) {
             trackEvent(Click.ShowCustomIdClick);
         }
+
+        console.log(id);
     });
 </script>
 
@@ -59,7 +63,7 @@
             {#if isProject}
                 <InputProjectId on:input bind:value={id} {autofocus} />
             {:else}
-                <InputId required on:input bind:value={id} {autofocus} />
+                <InputId {required} on:input bind:value={id} {autofocus} />
             {/if}
         </Layout.Stack>
     </Card.Base>

src/routes/(console)/project-[region]-[project]/databases/database-[database]/+page.svelte

@@ -35,8 +35,7 @@
                     ? `${base}/images/empty-database-dark.svg`
                     : `${base}/images/empty-database-light.svg`}>
                 <span slot="description">
-                    Create and manage structured data effortlessly, with the flexibility and control
-                    your app needs.
+                    Create, organize, and query structured data with Tables.
                 </span>
                 <span slot="actions">
                     <Button

src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+layout.svelte

@@ -29,7 +29,8 @@
         databaseRowSheetOptions,
         randomDataModalState,
         reorderItems,
-        showCreateAttributeSheet
+        showCreateAttributeSheet,
+        spreadsheetLoading
     } from './store';
     import { addSubPanel, registerCommands, updateCommandGroupRanks } from '$lib/commandCenter';
     import CreateAttribute from './createAttribute.svelte';
@@ -48,6 +49,7 @@
     import { Button, Seekbar } from '$lib/elements/forms';
     import { generateFakeDocuments, generateAttributes } from '$lib/helpers/faker';
     import { addNotification } from '$lib/stores/notifications';
+    import { sleep } from '$lib/helpers/promises';
 
     let editDocument: EditDocument;
     let createAttribute: CreateAttribute;
@@ -216,6 +218,7 @@
     });
 
     async function createFakeData() {
+        $spreadsheetLoading = true;
         $randomDataModalState.show = false;
 
         let attributes = $collection.attributes;
@@ -233,7 +236,7 @@
                     type: 'error',
                     message: e.message
                 });
-
+                $spreadsheetLoading = false;
                 return;
             }
         }
@@ -256,6 +259,10 @@
                 message: e.message
             });
         }
+
+        /* api is too fast! */
+        await sleep(1250);
+        $spreadsheetLoading = false;
     }
 </script>
 
@@ -314,7 +321,7 @@
 </SideSheet>
 
 <Dialog title="Generate random data" bind:open={$randomDataModalState.show}>
-    <Layout.Stack gap="xl">
+    <Layout.Stack style="gap: 28px;">
         <Typography.Text>
             Select how many random records to generate for testing. This won't delete or replace
             your existing records.

src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/deleteAttribute.svelte

@@ -52,7 +52,6 @@
             );
 
             trackEvent(Submit.AttributeDelete);
-            invalidate(Dependencies.COLLECTION);
             addNotification({
                 type: 'success',
                 message:
@@ -61,6 +60,7 @@
                         : `${selectedAttributes.length} attributes have been deleted`
             });
 
+            await invalidate(Dependencies.COLLECTION);
             showDelete = false;
             selectedAttribute = [];
         } catch (e) {

src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/createAttribute.svelte

@@ -137,6 +137,8 @@
     }
 
     $effect(() => {
+        columnId; /* silences lint check, variable not read */
+
         // correct view
         if (selectedOption) {
             $option = attributeOptions.find((option) => option.name === selectedOption);

src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/layout/emptySheet.svelte

@@ -12,6 +12,7 @@
     import { isSmallViewport } from '$lib/stores/viewport';
     import { SortButton } from '$lib/components';
     import type { Column } from '$lib/helpers/types';
+    import { spreadsheetLoading } from '../store';
 
     type Mode = 'records' | 'indexes';
 
@@ -114,7 +115,9 @@
         allowSelection
         emptyCells={12}
         height="fit-content"
-        columns={spreadsheetColumns}>
+        columns={spreadsheetColumns}
+        loading={$spreadsheetLoading}
+    >
         <svelte:fragment slot="header" let:root>
             {#each spreadsheetColumns as column (column.id)}
                 <Spreadsheet.Header.Cell {root} column={column.id} icon={column.icon ?? undefined}>

src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/spreadsheet.svelte

@@ -28,7 +28,7 @@
         reorderItems,
         columnsOrder,
         columnsWidth,
-        randomDataModalState
+        randomDataModalState, spreadsheetLoading
     } from './store';
     import RelationshipsModal from './relationshipsModal.svelte';
     import type { Column, ColumnType } from '$lib/helpers/types';
@@ -252,7 +252,6 @@
         );
     }
 
-    let loading = false;
     let showColumnDelete = false;
     let selectedRows: string[] = [];
 
@@ -260,11 +259,11 @@
     let selectedDocumentForDelete: Models.Document['$id'] | null = null;
 
     async function sort(query: string[]) {
-        loading = true;
+        $spreadsheetLoading = true;
         documents = await sdk
             .forProject(page.params.region, page.params.project)
             .databases.listDocuments(databaseId, collectionId, query);
-        loading = false;
+        $spreadsheetLoading = false;
     }
 
     async function handleDelete() {
@@ -448,11 +447,11 @@
 <SpreadsheetContainer>
     <Spreadsheet.Root
         let:root
-        {loading}
         height="100%"
         allowSelection
         bind:selectedRows
         bind:columns={$columns}
+        loading={$spreadsheetLoading}
         emptyCells={emptyCellsCount}
         bottomActionClick={() => (showRecordsCreateSheet.show = true)}
         on:columnsSwap={(order) => {

src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/store.ts

@@ -122,3 +122,5 @@ export const randomDataModalState = writable({
     show: false,
     value: 25 // initial value!
 });
+
+export const spreadsheetLoading = writable(false);

src/routes/(console)/project-[region]-[project]/databases/database-[database]/createCollection.svelte

@@ -87,6 +87,7 @@
     <CustomId
         show
         bind:id
+        required={false}
         autofocus={false}
         name="Collection"
         on:input={() => {