From 423693040b433122b0735c4710aa5a0b90ed7bb8 Mon Sep 17 00:00:00 2001
From: Davi Souto <davi.souto@gmail.com>
Date: Fri, 27 Dec 2024 00:53:13 -0300
Subject: [PATCH] feat: added debounce to the launch options input and removed
 unnecessary fragment in the clear button

---
 .../modals/game-options-modal.tsx             | 28 ++++++++++---------
 1 file changed, 15 insertions(+), 13 deletions(-)

diff --git a/src/renderer/src/pages/game-details/modals/game-options-modal.tsx b/src/renderer/src/pages/game-details/modals/game-options-modal.tsx
index 4fed0de1..69b459d1 100644
--- a/src/renderer/src/pages/game-details/modals/game-options-modal.tsx
+++ b/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"
-                      >
-                        {t("clear")}
-                      </Button>
-                    )}
-                  </>
+                  game.launchOptions && (
+                    <Button onClick={handleClearLaunchOptions} theme="outline">
+                      {t("clear")}
+                    </Button>
+                  )
                 }
               />
             </div>