From 45134c0ecddf9b65ec02c1e564d80de0329b92d1 Mon Sep 17 00:00:00 2001
From: duckietm <troop@mailtjes.com>
Date: Fri, 10 Apr 2026 10:35:28 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=86=99=20Fixed=20lagg=20in=20Color=20sele?=
 =?UTF-8?q?tor=20clothes?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../AvatarEditorAdvancedColorView.tsx         | 21 ++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/src/components/avatar-editor/palette-set/AvatarEditorAdvancedColorView.tsx b/src/components/avatar-editor/palette-set/AvatarEditorAdvancedColorView.tsx
index da4c12f..ce31a23 100644
--- a/src/components/avatar-editor/palette-set/AvatarEditorAdvancedColorView.tsx
+++ b/src/components/avatar-editor/palette-set/AvatarEditorAdvancedColorView.tsx
@@ -1,8 +1,10 @@
 import { IPartColor } from '@nitrots/nitro-renderer';
-import { FC, useCallback, useMemo, useRef } from 'react';
+import { FC, useCallback, useEffect, useMemo, useRef } from 'react';
 import { ColorUtils, GetClubMemberLevel, IAvatarEditorCategory } from '../../../api';
 import { useAvatarEditor } from '../../../hooks';
 
+const DEBOUNCE_MS = 150;
+
 const findNearestColor = (hex: string, colors: IPartColor[]): IPartColor | null =>
 {
     const r = parseInt(hex.slice(1, 3), 16);
@@ -34,6 +36,12 @@ export const AvatarEditorAdvancedColorView: FC<{
 {
     const { selectedColorParts = null, selectEditorColor = null } = useAvatarEditor();
     const inputRef = useRef<HTMLInputElement>(null);
+    const debounceRef = useRef<ReturnType<typeof setTimeout>>(null);
+
+    useEffect(() =>
+    {
+        return () => { if(debounceRef.current) clearTimeout(debounceRef.current); };
+    }, []);
 
     const selectedColor = useMemo(() =>
     {
@@ -52,9 +60,16 @@ export const AvatarEditorAdvancedColorView: FC<{
 
         if(!colors) return;
 
-        const nearest = findNearestColor(e.target.value, colors);
+        const value = e.target.value;
 
-        if(nearest) selectEditorColor(category.setType, paletteIndex, nearest.id);
+        if(debounceRef.current) clearTimeout(debounceRef.current);
+
+        debounceRef.current = setTimeout(() =>
+        {
+            const nearest = findNearestColor(value, colors);
+
+            if(nearest) selectEditorColor(category.setType, paletteIndex, nearest.id);
+        }, DEBOUNCE_MS);
     }, [ category, paletteIndex, selectEditorColor ]);
 
     return (