2121 - prevent recurring initializeSearchInputs() calls in admin UI

[gcgoncalves]

🐛 Bug-fix PR

📌 Summary

This PR fixes issue 2121, where the initializeSearchInputs() function was being called repeatedly every few seconds on table view tabs in the Admin UI, causing performance degradation and console log spam. The fix implements a generic memoization pattern with debouncing to prevent duplicate initialisation while maintaining proper search functionality across all tabs.

Closes #2121

🔁 Reproduction Steps

1. Access the Admin UI
2. Click on any tab that displays a table (MCP Servers, Virtual Servers, Tools, Resources, Prompts, A2A Agents)
3. Open browser console and monitor the logs
4. Observe the initialisation sequence repeating continuously every few seconds:

   🔍 Initializing search inputs...
   ✅ Virtual Servers search initialized
   ✅ Found MCP Servers search input
   ✅ MCP Servers search events attached
   ✅ Tools search initialized
   ✅ Resources search initialized
   ✅ Prompts search initialized
   ✅ A2A Agents search initialized
   

🐞 Root Cause

The root cause was in the DOMContentLoaded event handler in mcpgateway/static/admin.js:

1. Multiple HTMX event listeners (htmx:afterSwap, htmx:load) fired on every content update, not just tab switches
2. No debouncing mechanism to prevent rapid successive calls when events fired in quick succession
3. Event listener accumulation - the listeners that called initializeSearchInputs() were never removed and kept accumulating
4. Cascading effect - Each HTMX content update triggered both events, causing multiple delayed calls that created a feedback loop

The initializeSearchInputs() function itself tried to prevent duplicate event listeners by cloning input elements, but this didn't address the root cause of the function being called repeatedly.

💡 Fix Description

Implemented a generic memoization pattern with the following key features:

1. Created createMemoizedInit() Utility Function

• Generic, reusable pattern for any initialisation function
• Uses closure-based state management (no global variables)
• Returns object with { init, debouncedInit, reset } functions
• Built-in guards prevent concurrent and duplicate initialisation
• Integrated debouncing support

2. Applied Memoization to initializeSearchInputs()

• Created memoized versions: initializeSearchInputsMemoized, initializeSearchInputsDebounced
• Added resetSearchInputsState() for explicit state cleanup
• Exported reset function to window object for manual cleanup scenarios

3. Updated Event Listeners

• Use initializeSearchInputsMemoized() for immediate initialisation on page load
• Use initializeSearchInputsDebounced() for HTMX and tab switch events
• Added selective HTMX event handling (only triggers on relevant panel swaps)
• Removed redundant htmx:load listener
• Added resetSearchInputsState() calls before re-initialisation

4. Simplified initializeSearchInputs()

• Removed input cloning logic (no longer needed with memoization)
• Kept core initialisation logic intact

Key Design Points:

• No global variables - all state encapsulated in closures
• Reusable pattern - can be applied to other initialisation functions (metrics, modals, etc.)
• Explicit reset mechanism - proper cleanup when elements are destroyed
• Performance improvement - prevents unnecessary event listener creation/destruction

🧪 Verification

Check	Command	Status
Lint suite	make lint	✅
Unit tests	make test	✅
Coverage ≥ 90 %	make coverage	✅
Manual regression no longer fails	See below	✅

📝 Additional Notes

Future Reusability

This memoization pattern can be applied to other initialisation functions:

// Example: Memoize metrics loading
const {
    init: loadMetricsMemoized,
    debouncedInit: loadMetricsDebounced,
    reset: resetMetricsState
} = createMemoizedInit(loadAggregatedMetrics, 500, 'Metrics');

// Example: Memoize modal initialisation
const {
    init: initModalsMemoized,
    reset: resetModalsState
} = createMemoizedInit(initializeModals, 200, 'Modals');

Performance Impact

• Eliminates unnecessary event listener creation/destruction
• Reduces console log spam
• Improves overall UI responsiveness
• No memory leaks from accumulated event listeners

[crivetimihai]

Review Feedback & Fixes

Thanks for the PR! The memoization pattern is well-designed and reusable. During review, I identified two issues that I've fixed in additional commits:

1. Duplicate Event Listeners (Fixed in 6ac89d0b)

The PR removed the input cloning logic with the assumption that memoization prevents duplicate initialization. However, since resetSearchInputsState() is called on tab switches and HTMX swaps, the function can run multiple times. The search inputs persist (they're outside HTMX swap targets like servers-table), so each re-initialization added duplicate event listeners.

Fix: Restored the input cloning logic in initializeSearchInputs() to remove existing listeners before re-adding them.

2. Wrong Panel ID for Virtual Servers (Fixed in 21f576fe)

The relevantPanels array used servers-panel, but the actual panel ID in admin.html is catalog-panel. This prevented search re-initialization after pagination or "include inactive" toggle changes in the Virtual Servers tab.

Fix: Changed servers-panel → catalog-panel.

Commits Added

21f576fe fix: correct panel ID for Virtual Servers (catalog-panel not servers-panel)
6ac89d0b fix: restore input cloning to prevent duplicate event listeners

Both fixes pass make lint-web and syntax checks.