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
+ >
+ )}
)}