fix(modals): add support for disabling StoreApiKeyModal component when disabled prop is true

fix(pages): add support for disabling StoreApiKeyModal button when loading prop is true
feat(types): add disabled prop to StoreApiKeyType to enable/disable StoreApiKeyModal component

src/frontend/src/modals/StoreApiKeyModal/index.tsx

@@ -10,7 +10,11 @@ import { addApiKeyStore } from "../../controllers/API";
 import { StoreApiKeyType } from "../../types/components";
 import BaseModal from "../baseModal";
 
-export default function StoreApiKeyModal({ children }: StoreApiKeyType) {
+export default function StoreApiKeyModal({
+  children,
+  disabled = false,
+}: StoreApiKeyType) {
+  if (disabled) return <>{children}</>;
   const [open, setOpen] = useState(false);
   const { setSuccessData, setErrorData } = useContext(alertContext);
   const { storeApiKey } = useContext(AuthContext);
@@ -38,7 +42,7 @@ export default function StoreApiKeyModal({ children }: StoreApiKeyType) {
   };
 
   return (
-    <BaseModal size="small-h-full" open={open} setOpen={setOpen}>
+    <BaseModal size="small-h-full" open={open && !disabled} setOpen={setOpen}>
       <BaseModal.Trigger>{children}</BaseModal.Trigger>
       <BaseModal.Header
         description={

src/frontend/src/pages/StorePage/index.tsx

@@ -22,7 +22,7 @@ import { StoreContext } from "../../contexts/storeContext";
 import { getStoreComponents, getStoreTags } from "../../controllers/API";
 import StoreApiKeyModal from "../../modals/StoreApiKeyModal";
 import { storeComponent } from "../../types/store";
-import { cn } from "../../utils/utils";
+import { classNames, cn } from "../../utils/utils";
 export default function StorePage(): JSX.Element {
   const { validApiKey, setValidApiKey, hasApiKey, loadingApiKey } =
     useContext(StoreContext);
@@ -161,11 +161,13 @@ export default function StorePage(): JSX.Element {
               Langflow Store
             </span>
             <div className="community-page-nav-button">
-              <StoreApiKeyModal>
+              <StoreApiKeyModal disabled={loading}>
                 <Button
-                  className={`${
-                    !validApiKey ? "animate-pulse border-error" : ""
-                  }`}
+                  disabled={loading}
+                  className={classNames(
+                    `${!validApiKey ? "animate-pulse border-error" : ""}`,
+                    loading ? "cursor-not-allowed" : ""
+                  )}
                   variant="primary"
                 >
                   <IconComponent name="Key" className="main-page-nav-button" />
@@ -261,7 +263,11 @@ export default function StorePage(): JSX.Element {
             </div>
 
             <div className="flex h-6 items-center gap-2">
-              <Select onValueChange={setSelectFilter} value={selectFilter}>
+              <Select
+                disabled={loading}
+                onValueChange={setSelectFilter}
+                value={selectFilter}
+              >
                 <SelectTrigger className="mr-4 w-[160px]">
                   <SelectValue placeholder="Filter Values" />
                 </SelectTrigger>

src/frontend/src/types/components/index.ts

@@ -356,6 +356,7 @@ export type ApiKeyType = {
 
 export type StoreApiKeyType = {
   children: ReactElement;
+  disabled?: boolean;
 };
 export type groupedObjType = {
   family: string;