diff --git a/ui/app/mirrors/create/cdc/schemabox.tsx b/ui/app/mirrors/create/cdc/schemabox.tsx index 637be66f4c..d030fbc74a 100644 --- a/ui/app/mirrors/create/cdc/schemabox.tsx +++ b/ui/app/mirrors/create/cdc/schemabox.tsx @@ -48,11 +48,13 @@ const SchemaBox = ({ const searchedTables = useMemo(() => { const tableQueryLower = tableQuery.toLowerCase(); - return rows.filter( - (row) => - row.schema === schema && - row.source.toLowerCase().includes(tableQueryLower) - ); + return rows + .filter( + (row) => + row.schema === schema && + row.source.toLowerCase().includes(tableQueryLower) + ) + .sort((a, b) => a.source.localeCompare(b.source)); }, [schema, rows, tableQuery]); const schemaIsExpanded = useCallback( diff --git a/ui/app/mirrors/create/page.tsx b/ui/app/mirrors/create/page.tsx index 497d3aea4b..6b6e23f499 100644 --- a/ui/app/mirrors/create/page.tsx +++ b/ui/app/mirrors/create/page.tsx @@ -8,6 +8,7 @@ import { Icon } from '@/lib/Icon'; import { Label } from '@/lib/Label'; import { RowWithSelect, RowWithTextField } from '@/lib/Layout'; import { Panel } from '@/lib/Panel'; +import { ProgressCircle } from '@/lib/ProgressCircle'; import { TextField } from '@/lib/TextField'; import { Divider } from '@tremor/react'; import Image from 'next/image'; @@ -219,6 +220,7 @@ export default function CreateMirrors() { fontWeight: 'bold', }} variant='normalSolid' + disabled={loading} onClick={() => mirrorType === 'CDC' ? handleCreateCDC( @@ -240,7 +242,13 @@ export default function CreateMirrors() { ) } > - Create Mirror + {loading ? ( + + ) : ( + <> + Create Mirror + + )} )}