chore: Add CustomLoader component and integrate with loading states i…

…n Admin, Flow, and Main pages (#6047) * feat: Add CustomLoader component and integrate with loading states in Admin, Flow, and Main pages * refactor: simplify CustomLoader component and remove conditional loading logic * feat: add configurable size to CustomLoader component
langflow-ai · Feb 7, 2025 · 141e673 · 141e673
1 parent f9e41f9
commit 141e673
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 6 deletions.
diff --git a/src/frontend/src/customization/components/custom-loader.tsx b/src/frontend/src/customization/components/custom-loader.tsx
@@ -0,0 +1,16 @@
+import LoadingComponent from "@/components/common/loadingComponent";
+import { ENABLE_DATASTAX_LANGFLOW } from "../feature-flags";
+
+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/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
@@ -5,10 +5,10 @@ import {
   useGetUsers,
   useUpdateUser,
 } from "@/controllers/API/queries/auth";
+import CustomLoader from "@/customization/components/custom-loader";
 import { cloneDeep } from "lodash";
 import { useContext, useEffect, useRef, useState } from "react";
 import IconComponent from "../../components/common/genericIconComponent";
-import LoadingComponent from "../../components/common/loadingComponent";
 import ShadTooltip from "../../components/common/shadTooltipComponent";
 import { Button } from "../../components/ui/button";
 import { CheckBoxDiv } from "../../components/ui/checkbox";
@@ -303,7 +303,7 @@ export default function AdminPage() {
           </div>
           {isPending || isIdle ? (
             <div className="flex h-full w-full items-center justify-center">
-              <LoadingComponent remSize={12} />
+              <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
@@ -2,7 +2,6 @@ import { DefaultEdge } from "@/CustomEdges";
 import NoteNode from "@/CustomNodes/NoteNode";
 
 import ForwardedIconComponent from "@/components/common/genericIconComponent";
-import LoadingComponent from "@/components/common/loadingComponent";
 import CanvasControls, {
   CustomControlButton,
 } from "@/components/core/canvasControlsComponent";
@@ -14,6 +13,7 @@ import {
   NOTE_NODE_MIN_WIDTH,
 } from "@/constants/constants";
 import { useGetBuildsQuery } from "@/controllers/API/queries/_builds";
+import CustomLoader from "@/customization/components/custom-loader";
 import { track } from "@/customization/utils/analytics";
 import useAutoSaveFlow from "@/hooks/flows/use-autosave-flow";
 import useUploadFlow from "@/hooks/flows/use-upload-flow";
@@ -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">
-          <LoadingComponent remSize={30} />
+          <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
@@ -1,8 +1,8 @@
-import LoadingComponent from "@/components/common/loadingComponent";
 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 { useCustomNavigate } from "@/customization/hooks/use-custom-navigate";
 import useAlertStore from "@/stores/alertStore";
 import useFlowsManagerStore from "@/stores/flowsManagerStore";
@@ -90,7 +90,7 @@ export default function CollectionPage(): JSX.Element {
           </div>
         ) : (
           <div className="flex h-full w-full items-center justify-center">
-            <LoadingComponent remSize={30} />
+            <CustomLoader remSize={30} />
           </div>
         )}
       </main>