From 748d20b743441c95d602e75451391a5a4d64c5d6 Mon Sep 17 00:00:00 2001
From: Amogh-Bharadwaj <amogh@peerdb.io>
Date: Wed, 20 Mar 2024 23:43:38 +0530
Subject: [PATCH] add loading indicator

---
 ui/app/mirrors/create/cdc/cdc.tsx    | 37 +++++++---------------------
 ui/app/mirrors/create/cdc/fields.tsx |  9 ++++++-
 2 files changed, 17 insertions(+), 29 deletions(-)

diff --git a/ui/app/mirrors/create/cdc/cdc.tsx b/ui/app/mirrors/create/cdc/cdc.tsx
index be12670b3f..3c194f0a8c 100644
--- a/ui/app/mirrors/create/cdc/cdc.tsx
+++ b/ui/app/mirrors/create/cdc/cdc.tsx
@@ -2,8 +2,6 @@
 import { DBType } from '@/grpc_generated/peers';
 import { Button } from '@/lib/Button';
 import { Icon } from '@/lib/Icon';
-import { Label } from '@/lib/Label/Label';
-import { ProgressCircle } from '@/lib/ProgressCircle';
 import { Dispatch, SetStateAction, useEffect, useMemo, useState } from 'react';
 import { CDCConfig, MirrorSetter, TableMapRow } from '../../../dto/MirrorsDTO';
 import { fetchPublications } from '../handlers';
@@ -40,6 +38,7 @@ export default function CDCConfigForm({
   setRows,
 }: MirrorConfigProps) {
   const [publications, setPublications] = useState<string[]>();
+  const [pubLoading, setPubLoading] = useState(true);
   const [show, setShow] = useState(false);
   const handleChange = (val: string | boolean, setting: MirrorSetting) => {
     let stateVal: string | boolean = val;
@@ -68,18 +67,11 @@ export default function CDCConfigForm({
     return true;
   };
 
-  const optionsForField = (setting: MirrorSetting) => {
-    switch (setting.label) {
-      case 'Publication Name':
-        return publications;
-      default:
-        return [];
-    }
-  };
-
   useEffect(() => {
+    setPubLoading(true);
     fetchPublications(mirrorConfig.source?.name || '').then((pubs) => {
       setPublications(pubs);
+      setPubLoading(false);
     });
   }, [mirrorConfig.source?.name]);
 
@@ -93,7 +85,12 @@ export default function CDCConfigForm({
                 key={id}
                 handleChange={handleChange}
                 setting={setting}
-                options={optionsForField(setting)}
+                options={
+                  setting.label === 'Publication Name'
+                    ? publications
+                    : undefined
+                }
+                publicationsLoading={pubLoading}
               />
             )
           );
@@ -124,7 +121,6 @@ export default function CDCConfigForm({
                 key={setting.label}
                 handleChange={handleChange}
                 setting={setting}
-                options={optionsForField(setting)}
               />
             );
           })}
@@ -138,19 +134,4 @@ export default function CDCConfigForm({
         />
       </>
     );
-
-  if (publications === undefined)
-    return (
-      <div
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          marginTop: '2rem',
-          columnGap: '1rem',
-        }}
-      >
-        <Label>Loading publications...</Label>
-        <ProgressCircle variant='determinate_progress_circle' />
-      </div>
-    );
 }
diff --git a/ui/app/mirrors/create/cdc/fields.tsx b/ui/app/mirrors/create/cdc/fields.tsx
index 8bf802ffa1..7d8842e89a 100644
--- a/ui/app/mirrors/create/cdc/fields.tsx
+++ b/ui/app/mirrors/create/cdc/fields.tsx
@@ -13,9 +13,15 @@ interface FieldProps {
   setting: MirrorSetting;
   handleChange: (val: string | boolean, setting: MirrorSetting) => void;
   options?: string[];
+  publicationsLoading?: boolean;
 }
 
-const CDCField = ({ setting, handleChange, options }: FieldProps) => {
+const CDCField = ({
+  setting,
+  handleChange,
+  options,
+  publicationsLoading,
+}: FieldProps) => {
   return setting.type === 'switch' ? (
     <RowWithSwitch
       label={
@@ -72,6 +78,7 @@ const CDCField = ({ setting, handleChange, options }: FieldProps) => {
               getOptionLabel={(option) => option.label}
               getOptionValue={(option) => option.option}
               theme={SelectTheme}
+              isLoading={publicationsLoading}
             />
           </div>
           {setting.tips && (