From beaf0ceba7a4adba48866bf9ace87d04c8459a00 Mon Sep 17 00:00:00 2001
From: Kalle <38327916+Sendouc@users.noreply.github.com>
Date: Sun, 15 Oct 2023 14:12:59 +0300
Subject: [PATCH] Improve AbilitySelector responsiveness on slower machines

---
 app/components/AbilitiesSelector.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/app/components/AbilitiesSelector.tsx b/app/components/AbilitiesSelector.tsx
index b25c0bf1f..7bce305aa 100644
--- a/app/components/AbilitiesSelector.tsx
+++ b/app/components/AbilitiesSelector.tsx
@@ -1,5 +1,5 @@
 import clsx from "clsx";
-import React from "react";
+import * as React from "react";
 import invariant from "tiny-invariant";
 import { abilities } from "~/modules/in-game-lists";
 import type { BuildAbilitiesTupleWithUnknown } from "~/modules/in-game-lists/types";
@@ -16,6 +16,8 @@ export function AbilitiesSelector({
   selectedAbilities,
   onChange,
 }: AbilitiesSelectorProps) {
+  const [, startTransition] = React.useTransition();
+
   const onSlotClick = ({
     rowI,
     abilityI,
@@ -39,7 +41,9 @@ export function AbilitiesSelector({
     onChange(abilitiesClone);
   };
   const onButtonClick = (ability: (typeof abilities)[number]) => {
-    onChange(addAbility({ oldAbilities: selectedAbilities, ability }));
+    startTransition(() => {
+      onChange(addAbility({ oldAbilities: selectedAbilities, ability }));
+    });
   };
 
   const [draggingAbility, setDraggingAbility] = React.useState<