From a35d007356e231265a66833adccee01ad0ef848c Mon Sep 17 00:00:00 2001
From: Amogh-Bharadwaj <amogh@peerdb.io>
Date: Fri, 5 Jan 2024 01:49:49 +0530
Subject: [PATCH] sort tables, spinner for button

---
 ui/app/mirrors/create/cdc/schemabox.tsx | 12 +++++++-----
 ui/app/mirrors/create/page.tsx          | 10 +++++++++-
 2 files changed, 16 insertions(+), 6 deletions(-)

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() {
                   )
             }
           >
-            <Icon name='add' /> Create Mirror
+            {loading ? (
+              <ProgressCircle variant='determinate_progress_circle' />
+            ) : (
+              <>
+                <Icon name='add' /> Create Mirror
+              </>
+            )}
           </Button>
         )}
       </Panel>