chore: Add CustomLoader component and integrate with loading states in Admin, Flow, and Main pages

src/frontend/src/customization/components/custom-loader.tsx

@@ -0,0 +1,5 @@
+const CustomLoader = () => {
+  return <></>;
+};
+
+export default CustomLoader;

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,

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 ? (
             <>

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>

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>