wait 10ms on key down enter, to avoid any error with prompt state

app/api/route.ts

@@ -49,7 +49,6 @@ export async function POST(
   }
 
   const isNSFW: any = await checkIfIsNSFW(blob)
-
   if (isNSFW?.error) return Response.json({ status: 500, ok: false, message: isNSFW?.error });
 
   if (isNSFW?.length) {

components/button/index.tsx

@@ -2,11 +2,13 @@ import classNames from "classnames";
 
 interface Props {
   children: React.ReactNode;
+  disabled?: boolean;
   theme?: "primary" | "secondary" | "white";
   onClick?: () => void;
 }
 export const Button: React.FC<Props> = ({
   children,
+  disabled,
   theme = "primary",
   ...props
 }) => {
@@ -17,6 +19,8 @@ export const Button: React.FC<Props> = ({
         {
           "bg-primary text-white border-primary": theme === "primary",
           "bg-white text-gray-900 border-white": theme === "white",
+          "!bg-gray-400 !text-gray-600 !cursor-not-allowed !border-gray-400":
+            disabled,
         }
       )}
       {...props}

components/input-generation.tsx

@@ -3,6 +3,7 @@ import { useRef, useState } from "react";
 import { HiLightBulb, HiSearch } from "react-icons/hi";
 import { useUpdateEffect } from "react-use";
 import { useInputGeneration } from "./main/hooks/useInputGeneration";
+import { set } from "lodash";
 
 export const InputGeneration: React.FC = () => {
   const { prompt, setPrompt, submit, loading } = useInputGeneration();
@@ -28,7 +29,10 @@ export const InputGeneration: React.FC = () => {
           onBlur={() => setPrompt(value)}
           onKeyDown={(e) => {
             if (e.key === "Enter" && (value || prompt) && !loading) {
-              submit();
+              setPrompt(value);
+              setTimeout(() => {
+                submit();
+              }, 10);
             }
           }}
         />

components/main/index.tsx

@@ -24,7 +24,7 @@ const categories = [
 ];
 
 export const Main = () => {
-  const { list_styles, style, setStyle } = useInputGeneration();
+  const { list_styles, style, setStyle, loading } = useInputGeneration();
   const [category, setCategory] = useState<string>("community");
   const [advancedSettings, setAdvancedSettings] = useState<boolean>(false);
 
@@ -37,6 +37,7 @@ export const Main = () => {
             {categories.map(({ key, label, icon }) => (
               <Button
                 key={key}
+                disabled={loading}
                 theme={key !== category ? "white" : "primary"}
                 onClick={() => setCategory(key)}
               >