From 4a5e05a9953e2ea9dd170c9bcf167981c3e313ed Mon Sep 17 00:00:00 2001
From: deon-sanchez <deon.sanchez@datastax.com>
Date: Fri, 31 Jan 2025 12:06:21 -0700
Subject: [PATCH] feat: Add CustomLoader component and integrate with loading
 states in Admin, Flow, and Main pages

---
 .../src/customization/components/custom-loader.tsx        | 5 +++++
 src/frontend/src/modals/apiModal/utils/get-curl-code.tsx  | 2 ++
 src/frontend/src/pages/AdminPage/index.tsx                | 8 +++++++-
 .../src/pages/FlowPage/components/PageComponent/index.tsx | 8 +++++++-
 src/frontend/src/pages/MainPage/pages/index.tsx           | 8 +++++++-
 5 files changed, 28 insertions(+), 3 deletions(-)
 create mode 100644 src/frontend/src/customization/components/custom-loader.tsx

diff --git a/src/frontend/src/customization/components/custom-loader.tsx b/src/frontend/src/customization/components/custom-loader.tsx
new file mode 100644
index 000000000000..c2de4981126b
--- /dev/null
+++ b/src/frontend/src/customization/components/custom-loader.tsx
@@ -0,0 +1,5 @@
+const CustomLoader = () => {
+  return <></>;
+};
+
+export default CustomLoader;
diff --git a/src/frontend/src/modals/apiModal/utils/get-curl-code.tsx b/src/frontend/src/modals/apiModal/utils/get-curl-code.tsx
index a6d78963d28a..ca00de7a831f 100644
--- a/src/frontend/src/modals/apiModal/utils/get-curl-code.tsx
+++ b/src/frontend/src/modals/apiModal/utils/get-curl-code.tsx
@@ -45,6 +45,8 @@ export function getCurlRunCode({
  * @param {string} options.endpointName - The name of the webhook endpoint.
  * @returns {string} The cURL command.
  */
+
+// KEEP THIS FOR LFOSS
 export function getCurlWebhookCode({
   flowId,
   isAuth,
diff --git a/src/frontend/src/pages/AdminPage/index.tsx b/src/frontend/src/pages/AdminPage/index.tsx
index ce29a3a44fd0..26b16002a787 100644
--- a/src/frontend/src/pages/AdminPage/index.tsx
+++ b/src/frontend/src/pages/AdminPage/index.tsx
@@ -5,6 +5,8 @@ import {
   useGetUsers,
   useUpdateUser,
 } from "@/controllers/API/queries/auth";
+import CustomLoader from "@/customization/components/custom-loader";
+import { ENABLE_DATASTAX_LANGFLOW } from "@/customization/feature-flags";
 import { cloneDeep } from "lodash";
 import { useContext, useEffect, useRef, useState } from "react";
 import IconComponent from "../../components/common/genericIconComponent";
@@ -303,7 +305,11 @@ export default function AdminPage() {
           </div>
           {isPending || isIdle ? (
             <div className="flex h-full w-full items-center justify-center">
-              <LoadingComponent remSize={12} />
+              {ENABLE_DATASTAX_LANGFLOW ? (
+                <CustomLoader />
+              ) : (
+                <LoadingComponent 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 18b28991c9eb..84b0206c9493 100644
--- a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
@@ -14,6 +14,8 @@ import {
   NOTE_NODE_MIN_WIDTH,
 } from "@/constants/constants";
 import { useGetBuildsQuery } from "@/controllers/API/queries/_builds";
+import CustomLoader from "@/customization/components/custom-loader";
+import { ENABLE_DATASTAX_LANGFLOW } from "@/customization/feature-flags";
 import { track } from "@/customization/utils/analytics";
 import useAutoSaveFlow from "@/hooks/flows/use-autosave-flow";
 import useUploadFlow from "@/hooks/flows/use-upload-flow";
@@ -637,7 +639,11 @@ export default function Page({ view }: { view?: boolean }): JSX.Element {
         </div>
       ) : (
         <div className="flex h-full w-full items-center justify-center">
-          <LoadingComponent remSize={30} />
+          {ENABLE_DATASTAX_LANGFLOW ? (
+            <CustomLoader />
+          ) : (
+            <LoadingComponent 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 6ec08188b372..27ba6431f020 100644
--- a/src/frontend/src/pages/MainPage/pages/index.tsx
+++ b/src/frontend/src/pages/MainPage/pages/index.tsx
@@ -3,6 +3,8 @@ import CardsWrapComponent from "@/components/core/cardsWrapComponent";
 import SideBarFoldersButtonsComponent from "@/components/core/folderSidebarComponent/components/sideBarFolderButtons";
 import { SidebarProvider } from "@/components/ui/sidebar";
 import { useDeleteFolders } from "@/controllers/API/queries/folders";
+import CustomLoader from "@/customization/components/custom-loader";
+import { ENABLE_DATASTAX_LANGFLOW } from "@/customization/feature-flags";
 import { useCustomNavigate } from "@/customization/hooks/use-custom-navigate";
 import useAlertStore from "@/stores/alertStore";
 import useFlowsManagerStore from "@/stores/flowsManagerStore";
@@ -90,7 +92,11 @@ export default function CollectionPage(): JSX.Element {
           </div>
         ) : (
           <div className="flex h-full w-full items-center justify-center">
-            <LoadingComponent remSize={30} />
+            {ENABLE_DATASTAX_LANGFLOW ? (
+              <CustomLoader />
+            ) : (
+              <LoadingComponent remSize={30} />
+            )}
           </div>
         )}
       </main>