From d41b7b9c124556960f9e22bcf30661884790f371 Mon Sep 17 00:00:00 2001
From: deon-sanchez <deon.sanchez@datastax.com>
Date: Fri, 7 Feb 2025 09:02:28 -0700
Subject: [PATCH] feat: add configurable size to CustomLoader component

---
 .../src/customization/components/custom-loader.tsx   | 12 ++++++++++--
 src/frontend/src/pages/AdminPage/index.tsx           |  2 +-
 .../FlowPage/components/PageComponent/index.tsx      |  2 +-
 src/frontend/src/pages/MainPage/pages/index.tsx      |  2 +-
 4 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/frontend/src/customization/components/custom-loader.tsx b/src/frontend/src/customization/components/custom-loader.tsx
index 7e8680c678c1..44f35277c800 100644
--- a/src/frontend/src/customization/components/custom-loader.tsx
+++ b/src/frontend/src/customization/components/custom-loader.tsx
@@ -1,8 +1,16 @@
 import LoadingComponent from "@/components/common/loadingComponent";
 import { ENABLE_DATASTAX_LANGFLOW } from "../feature-flags";
 
-const CustomLoader = () => {
-  return ENABLE_DATASTAX_LANGFLOW ? <></> : <LoadingComponent remSize={30} />;
+type CustomLoaderProps = {
+  remSize?: number;
+};
+
+const CustomLoader = ({ remSize = 30 }: CustomLoaderProps) => {
+  return ENABLE_DATASTAX_LANGFLOW ? (
+    <></>
+  ) : (
+    <LoadingComponent remSize={remSize} />
+  );
 };
 
 export default CustomLoader;
diff --git a/src/frontend/src/pages/AdminPage/index.tsx b/src/frontend/src/pages/AdminPage/index.tsx
index 6ea1bec07bf7..e209ce6437dc 100644
--- a/src/frontend/src/pages/AdminPage/index.tsx
+++ b/src/frontend/src/pages/AdminPage/index.tsx
@@ -303,7 +303,7 @@ export default function AdminPage() {
           </div>
           {isPending || isIdle ? (
             <div className="flex h-full w-full items-center justify-center">
-              <CustomLoader />
+              <CustomLoader remSize={12} />
             </div>
           ) : userList.current.length === 0 && !isIdle ? (
             <>
diff --git a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
index 30beaaec298a..4441ae49f2df 100644
--- a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
@@ -638,7 +638,7 @@ export default function Page({ view }: { view?: boolean }): JSX.Element {
         </div>
       ) : (
         <div className="flex h-full w-full items-center justify-center">
-          <CustomLoader />
+          <CustomLoader remSize={30} />
         </div>
       )}
     </div>
diff --git a/src/frontend/src/pages/MainPage/pages/index.tsx b/src/frontend/src/pages/MainPage/pages/index.tsx
index d902e22ca7c1..3f145d43433f 100644
--- a/src/frontend/src/pages/MainPage/pages/index.tsx
+++ b/src/frontend/src/pages/MainPage/pages/index.tsx
@@ -90,7 +90,7 @@ export default function CollectionPage(): JSX.Element {
           </div>
         ) : (
           <div className="flex h-full w-full items-center justify-center">
-            <CustomLoader />
+            <CustomLoader remSize={30} />
           </div>
         )}
       </main>