danvics/Pulse
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

perf: debounce search input in Kubernetes clusters view

Browse source 
Prevents UI jank during rapid typing by using a 200ms debounced search term.
This commit is contained in:
rcourtman 2025-12-13 21:28:19 +00:00
parent 8abcc93aac
commit d5638c7c14
1 changed files with 8 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
frontend-modern/src/components/Kubernetes/KubernetesClusters.tsx
View file

@ -1,6 +1,7 @@
import type { Component } from 'solid-js'; import type { Component } from 'solid-js';
import { For, Show, createMemo, createSignal, createEffect } from 'solid-js'; import { For, Show, createMemo, createSignal, createEffect } from 'solid-js';
import { usePersistentSignal } from '@/hooks/usePersistentSignal'; import { usePersistentSignal } from '@/hooks/usePersistentSignal';
import { useDebouncedValue } from '@/hooks/useDebouncedValue';
import { useColumnVisibility, type ColumnDef } from '@/hooks/useColumnVisibility'; import { useColumnVisibility, type ColumnDef } from '@/hooks/useColumnVisibility';
import type { import type {
KubernetesCluster, KubernetesCluster,
@ -141,6 +142,8 @@ const POD_COLUMNS: ColumnDef[] = [
export const KubernetesClusters: Component<KubernetesClustersProps> = (props) => { export const KubernetesClusters: Component<KubernetesClustersProps> = (props) => {
const [search, setSearch] = createSignal(''); const [search, setSearch] = createSignal('');
// PERFORMANCE: Debounce search term to prevent jank during rapid typing
const debouncedSearch = useDebouncedValue(() => search(), 200);
const [viewMode, setViewMode] = createSignal<ViewMode>('clusters'); const [viewMode, setViewMode] = createSignal<ViewMode>('clusters');
const [statusFilter, setStatusFilter] = createSignal<StatusFilter>('all'); const [statusFilter, setStatusFilter] = createSignal<StatusFilter>('all');
const [showHidden, setShowHidden] = createSignal(false); const [showHidden, setShowHidden] = createSignal(false);
@ -251,7 +254,8 @@ export const KubernetesClusters: Component<KubernetesClustersProps> = (props) =>
}); });
const visibleClusters = createMemo(() => { const visibleClusters = createMemo(() => {
const term = search().trim().toLowerCase(); // PERFORMANCE: Use debounced search term
const term = debouncedSearch().trim().toLowerCase();
const clusters = props.clusters ?? []; const clusters = props.clusters ?? [];
const status = statusFilter(); const status = statusFilter();
const key = sortKey(); const key = sortKey();
@ -294,7 +298,7 @@ export const KubernetesClusters: Component<KubernetesClustersProps> = (props) =>
}); });
const filteredNodes = createMemo(() => { const filteredNodes = createMemo(() => {
const term = search().trim().toLowerCase(); const term = debouncedSearch().trim().toLowerCase();
const status = statusFilter(); const status = statusFilter();
const key = sortKey(); const key = sortKey();
const dir = sortDirection(); const dir = sortDirection();
@ -335,7 +339,7 @@ export const KubernetesClusters: Component<KubernetesClustersProps> = (props) =>
}); });
const filteredPods = createMemo(() => { const filteredPods = createMemo(() => {
const term = search().trim().toLowerCase(); const term = debouncedSearch().trim().toLowerCase();
const status = statusFilter(); const status = statusFilter();
const ns = namespaceFilter(); const ns = namespaceFilter();
const key = sortKey(); const key = sortKey();
@ -382,7 +386,7 @@ export const KubernetesClusters: Component<KubernetesClustersProps> = (props) =>
}); });
const filteredDeployments = createMemo(() => { const filteredDeployments = createMemo(() => {
const term = search().trim().toLowerCase(); const term = debouncedSearch().trim().toLowerCase();
const status = statusFilter(); const status = statusFilter();
const ns = namespaceFilter(); const ns = namespaceFilter();
const key = sortKey(); const key = sortKey();