🐛 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

📝 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