Thanks, Md. Mojnu Miah bhai. Since your loading state is stored in an array of image objects, like this:
images = [
{ src: "", seed: 123, loading: "Generating...", error: "" },
{ src: "someImage.png", seed: 456, loading: "", error: "" },
...
];You probably want to disable the submit button when any image is still generating.
✅ Step-by-Step Solution:
Let’s say you’re using the useImages context to get the images array. Then:
✅ 1. Check if any image is still loading
const { images } = useImages();
const isLoading = images?.some((img) => img.loading === "Generating...");✅ 2. Disable the button if loading
<button disabled={isLoading}>Submit</button>✅ For your specific InputPrompt component:
Update like this:
import { useImages } from "../../context/ImagesContext";
export default function InputPrompt({
apiParameters,
setApiParameters,
onSubmitted,
onCancelFetch,
isCancelFetch,
}) {
const { images } = useImages();
const isLoading = images?.some((img) => img.loading === "Generating...");
return (
<div className="relative mb-8 rounded-full overflow-hidden border border-zinc-700 bg-zinc-900/10 backdrop-blur-sm">
<div className="flex items-center">
<div className="pl-5 pr-2">
<SearchIcon />
</div>
<input
value={apiParameters?.promptText}
onChange={(e) =>
setApiParameters({ ...apiParameters, promptText: e.target.value })
}
type="text"
placeholder="Create with Prompts"
className="outline-none w-full py-4 px-2 bg-transparent text-white placeholder-zinc-400 text-lg"
/>
{isCancelFetch ? (
<button
className="bg-zinc-800 hover:bg-zinc-700 transition-colors p-4 mr-1 rounded-full cursor-pointer"
onClick={() => onSubmitted()}
disabled={isLoading}
>
<SubmitIcon />
</button>
) : (
<button
className="bg-zinc-800 hover:bg-zinc-700 transition-colors p-4 mr-1 rounded-full cursor-pointer"
onClick={() => onCancelFetch()}
disabled={isLoading}
>
<StopIcon />
</button>
)}
</div>
</div>
);
}Let me know if you want:
- the button to show a spinner, or
- to hide the button while loading
I’ll help you with that too.