jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

fix(shareModal/index.tsx): fix conditional rendering of button text to display loader when loadingNames is true

Browse source 
feat(shareModal/index.tsx): add loader animation to button when loadingNames is true to provide visual feedback to the user
This commit is contained in:
cristhianzl 2023-12-08 16:05:14 -03:00
commit 80c6f7cec6
1 changed files with 25 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

29
src/frontend/src/modals/shareModal/index.tsx
View file

@ -1,3 +1,4 @@
import { Loader2 } from "lucide-react";
import { ReactNode, useContext, useEffect, useMemo, useState } from "react"; import { ReactNode, useContext, useEffect, useMemo, useState } from "react";
import EditFlowSettings from "../../components/EditFlowSettingsComponent"; import EditFlowSettings from "../../components/EditFlowSettingsComponent";
import IconComponent from "../../components/genericIconComponent"; import IconComponent from "../../components/genericIconComponent";
@ -168,8 +169,18 @@ export default function ShareModal({
<ConfirmationModal.Trigger> <ConfirmationModal.Trigger>
<div className="text-right"> <div className="text-right">
<Button disabled={loadingNames} type="button"> <Button disabled={loadingNames} type="button">
{is_component ? "Save and " : ""}Share{" "} {loadingNames ? (
{!is_component ? "Flow" : ""} <>
<div className="center w-16">
<Loader2 className="m-auto h-4 w-4 animate-spin"></Loader2>
</div>
</>
) : (
<>
{is_component && !loadingNames ? "Save and " : ""}Share{" "}
{!is_component && !loadingNames ? "Flow" : ""}
</>
)}
</Button> </Button>
</div> </div>
</ConfirmationModal.Trigger> </ConfirmationModal.Trigger>
@ -185,8 +196,18 @@ export default function ShareModal({
}} }}
type="button" type="button"
> >
{is_component ? "Save and " : ""}Share{" "} {loadingNames ? (
{!is_component ? "Flow" : ""} <>
<div className="center w-16">
<Loader2 className="m-auto h-4 w-4 animate-spin"></Loader2>
</div>
</>
) : (
<>
{is_component && !loadingNames ? "Save and " : ""}Share{" "}
{!is_component && !loadingNames ? "Flow" : ""}
</>
)}
</Button> </Button>
</> </>
)} )}