From 6a7abbaa829c9f75fd58e9b6fb2b7ccb1e10b0f3 Mon Sep 17 00:00:00 2001
From: SergeantPanda <chester.cullen@gmail.com>
Date: Tue, 15 Jul 2025 20:36:32 -0500
Subject: [PATCH] Fix text filtering.

---
 frontend/src/components/tables/LogosTable.jsx | 27 +++++++++++++------
 1 file changed, 19 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/tables/LogosTable.jsx b/frontend/src/components/tables/LogosTable.jsx
index 872b9dca..a828a24a 100644
--- a/frontend/src/components/tables/LogosTable.jsx
+++ b/frontend/src/components/tables/LogosTable.jsx
@@ -1,4 +1,4 @@
-import React, { useMemo, useCallback, useState } from 'react';
+import React, { useMemo, useCallback, useState, useEffect } from 'react';
 import API from '../../api';
 import LogoForm from '../forms/Logo';
 import useChannelsStore from '../../store/channels';
@@ -93,6 +93,16 @@ const LogosTable = () => {
         name: '',
         used: 'all'
     });
+    const [debouncedNameFilter, setDebouncedNameFilter] = useState('');
+
+    // Debounce the name filter
+    useEffect(() => {
+        const timer = setTimeout(() => {
+            setDebouncedNameFilter(filters.name);
+        }, 300); // 300ms delay
+
+        return () => clearTimeout(timer);
+    }, [filters.name]);
 
     /**
      * Functions
@@ -261,9 +271,9 @@ const LogosTable = () => {
         // Apply filters
         let filteredLogos = logosArray;
 
-        if (filters.name) {
+        if (debouncedNameFilter) {
             filteredLogos = filteredLogos.filter(logo =>
-                logo.name.toLowerCase().includes(filters.name.toLowerCase())
+                logo.name.toLowerCase().includes(debouncedNameFilter.toLowerCase())
             );
         }
 
@@ -274,7 +284,7 @@ const LogosTable = () => {
         }
 
         return filteredLogos.sort((a, b) => a.id - b.id);
-    }, [logos, filters]);
+    }, [logos, debouncedNameFilter, filters.used]);
 
     const renderHeaderCell = (header) => {
         return (
@@ -355,12 +365,13 @@ const LogosTable = () => {
                                 <TextInput
                                     placeholder="Filter by name..."
                                     value={filters.name}
-                                    onChange={(event) =>
+                                    onChange={(event) => {
+                                        const value = event.target.value;
                                         setFilters(prev => ({
                                             ...prev,
-                                            name: event.currentTarget.value
-                                        }))
-                                    }
+                                            name: value
+                                        }));
+                                    }}
                                     size="xs"
                                     style={{ width: 200 }}
                                 />