feat: added debounce to the launch options input and removed unnecessary fragment in the clear button

src/renderer/src/pages/game-details/modals/game-options-modal.tsx

@@ -1,4 +1,4 @@
-import { useContext, useState } from "react";
+import { useContext, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Button, Modal, TextField } from "@renderer/components";
 import type { Game } from "@types";
@@ -8,6 +8,7 @@ import { DeleteGameModal } from "@renderer/pages/downloads/delete-game-modal";
 import { useDownload, useToast } from "@renderer/hooks";
 import { RemoveGameFromLibraryModal } from "./remove-from-library-modal";
 import { FileDirectoryIcon, FileIcon } from "@primer/octicons-react";
+import { debounce } from "lodash-es";
 
 export interface GameOptionsModalProps {
   visible: boolean;
@@ -45,6 +46,13 @@ export function GameOptionsModal({
   const isGameDownloading =
     game.status === "active" && lastPacket?.game.id === game.id;
 
+  const debounceUpdateLaunchOptions = useRef(
+    debounce(async (value: string) => {
+      await window.electron.updateLaunchOptions(game.id, value);
+      updateGame();
+    }, 1000)
+  ).current;
+
   const handleRemoveGameFromLibrary = async () => {
     if (isGameDownloading) {
       await cancelDownload(game.id);
@@ -121,8 +129,7 @@ export function GameOptionsModal({
     const value = event.target.value;
 
     setLaunchOptions(value);
-
-    window.electron.updateLaunchOptions(game.id, value).then(updateGame);
+    debounceUpdateLaunchOptions(value);
   };
 
   const handleClearLaunchOptions = async () => {
@@ -256,16 +263,11 @@ export function GameOptionsModal({
                 placeholder={t("launch_options_placeholder")}
                 onChange={handleChangeLaunchOptions}
                 rightContent={
-                  <>
-                    {game.launchOptions && (
-                      <Button
-                        onClick={handleClearLaunchOptions}
-                        theme="outline"
-                      >
+                  game.launchOptions && (
+                    <Button onClick={handleClearLaunchOptions} theme="outline">
                       {t("clear")}
                     </Button>
-                    )}
-                  </>
+                  )
                 }
               />
             </div>