Add: realtime on columns wait state

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

@@ -35,7 +35,8 @@
         spreadsheetRenderKey,
         expandTabs,
         databaseRelatedRowSheetOptions,
-        rowPermissionSheet
+        rowPermissionSheet,
+        type Columns
     } from './store';
     import { addSubPanel, registerCommands, updateCommandGroupRanks } from '$lib/commandCenter';
     import CreateColumn from './createColumn.svelte';
@@ -56,7 +57,6 @@
     import { Button, Seekbar } from '$lib/elements/forms';
     import { generateFakeRecords, generateColumns } from '$lib/helpers/faker';
     import { addNotification } from '$lib/stores/notifications';
-    import { sleep } from '$lib/helpers/promises';
     import CreateIndex from './indexes/createIndex.svelte';
     import { hash } from '$lib/helpers/string';
     import { preferences } from '$lib/stores/preferences';
@@ -66,6 +66,7 @@
 
     import IndexesSuggestions from '../(suggestions)/indexes.svelte';
     import { showIndexesSuggestions, tableColumnSuggestions } from '../(suggestions)';
+    import type { RealtimeResponseEvent } from '@appwrite.io/console';
 
     let editRow: EditRow;
     let editRelatedRow: EditRelatedRow;
@@ -82,6 +83,8 @@
      */
     let isWaterfallFromFaker = false;
 
+    let columnCreationHandler: ((response: RealtimeResponseEvent<unknown>) => void) | null = null;
+
     onMount(() => {
         expandTabs.set(preferences.getKey('tableHeaderExpanded', true));
 
@@ -92,6 +95,10 @@
                     response.events.includes('databases.*.tables.*.columns.*') ||
                     response.events.includes('databases.*.tables.*.indexes.*')
                 ) {
+                    if (isWaterfallFromFaker) {
+                        columnCreationHandler?.(response);
+                    }
+
                     // don't invalidate when -
                     // 1. from faker
                     // 2. ai columns creation
@@ -253,21 +260,76 @@
         indexes: 700
     });
 
+    function setupColumnObserver() {
+        let expectedCount = 0;
+        let resolvePromise: () => void;
+        let timeout: ReturnType<typeof setTimeout>;
+
+        const availableColumns = new Set<string>();
+        const waitPromise = new Promise<void>((resolve) => (resolvePromise = resolve));
+
+        columnCreationHandler = (response) => {
+            const { events, payload } = response;
+
+            if (
+                events.includes('databases.*.tables.*.columns.*.create') ||
+                events.includes('databases.*.tables.*.columns.*.update')
+            ) {
+                const asColumn = payload as Columns;
+                const columnId = asColumn.key;
+                const status = asColumn.status;
+
+                if (status === 'available') {
+                    availableColumns.add(columnId);
+
+                    if (expectedCount > 0 && availableColumns.size >= expectedCount) {
+                        clearTimeout(timeout);
+                        columnCreationHandler = null;
+                        resolvePromise();
+                    }
+                }
+            }
+        };
+
+        // return function to start waiting!
+        const startWaiting = (count: number) => {
+            expectedCount = count;
+
+            timeout = setTimeout(() => {
+                columnCreationHandler = null;
+                resolvePromise();
+            }, 10000);
+
+            if (availableColumns.size >= expectedCount) {
+                clearTimeout(timeout);
+                columnCreationHandler = null;
+                resolvePromise();
+            }
+        };
+
+        return { startWaiting, waitPromise };
+    }
+
     async function createFakeData() {
         isWaterfallFromFaker = true;
 
         $spreadsheetLoading = true;
         $randomDataModalState.show = false;
 
-        let columns = $table.columns;
+        let columns = page.data.table.columns as Columns[];
         const hasAnyRelationships = columns.some((column) => isRelationship(column));
         const filteredColumns = columns.filter((col) => col.type !== 'relationship');
 
         if (!filteredColumns.length) {
             try {
+                const { startWaiting, waitPromise } = setupColumnObserver();
                 columns = await generateColumns($project, page.params.database, page.params.table);
+                startWaiting(columns.length);
+                await waitPromise;
 
                 await invalidate(Dependencies.TABLE);
+                columns = page.data.table.columns as Columns[];
+
                 trackEvent(Submit.ColumnCreate, { type: 'faker' });
             } catch (e) {
                 addNotification({
@@ -279,9 +341,6 @@
             }
         }
 
-        /* let the columns be processed! */
-        await sleep(1250);
-
         let rowIds = [];
         try {
             const { rows, ids } = generateFakeRecords(columns, $randomDataModalState.value);