Skip to content

PMM-14640: [UI] FOC observed on Inventory service agents page#865

Merged
matejkubinec merged 3 commits intov3from
PMM-14640-ui-foc-observed-on-inventory-service-agents-page
Jan 9, 2026
Merged

PMM-14640: [UI] FOC observed on Inventory service agents page#865
matejkubinec merged 3 commits intov3from
PMM-14640-ui-foc-observed-on-inventory-service-agents-page

Conversation

@dmitri-saricev-3pillargloball
Copy link
Copy Markdown

@dmitri-saricev-3pillargloball dmitri-saricev-3pillargloball commented Dec 23, 2025

What is this feature?
https://perconadev.atlassian.net/browse/PMM-14640
Why do we need this feature?

Who is this feature for?

Which issue(s) does this PR fix?:

FB:
Percona-Lab/pmm-submodules#4170

Fixes #

Screen.Recording.2025-12-23.at.14.26.31.mov

Special notes for your reviewer:

Please check that:

  • It works as expected from a user's perspective.
  • If this is a pre-GA feature, it is behind a feature toggle.
  • The docs are updated, and if this is a notable improvement, it's added to our What's New doc.

- Remove !servicesLoading condition from service title render (line 203)
- Remove !nodesLoading condition from node title render (line 209)
- Keep title visible during data refresh to prevent layout shift
- Fixes FOC (Flash of Content) issue during auto-refresh
Copy link
Copy Markdown

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR fixes a Flash of Content (FOC) issue on the Inventory service agents page by removing unnecessary loading state checks from conditional rendering logic.

Key Changes:

  • Removed !servicesLoading condition from service breadcrumb rendering
  • Removed !nodesLoading condition from node breadcrumb rendering

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

This commit fixes critical issues causing memory leaks and unwanted API
requests that continue after component unmount, particularly the
/v1/inventory/services:getTypes request that persists on agent pages.

Root Cause:
1. Services.tsx: useRecurringCall creates recursive timer chains that
   continue executing after unmount due to race conditions in cleanup
2. Agents.tsx & Nodes.tsx: Empty dependency arrays caused stale closures,
   capturing outdated values and preventing proper cleanup
3. Agents.tsx: 7 unstable dependencies including Redux objects caused
   excessive re-renders

Fixes Applied:

Services.tsx:
- Added isMountedRef to track component mount state
- loadData now checks isMounted before making requests
- Prevents zombie requests when recurring timer fires after unmount
- Added stopTimeout to cleanup function
- Fixed stale closure by adding [dispatch, generateToken] dependencies

Agents.tsx:
- Fixed stale closure in loadData by adding proper dependencies
- Refactored useEffect from 7 to 4 primitive dependencies
- Extracted currentServiceId/currentNodeId to avoid object reference issues
- Changed to async pattern with early returns for better control flow
- Reduced coupling with Redux state updates

Nodes.tsx:
- Fixed stale closure in loadData by adding [dispatch, generateToken]

All changes include detailed comments explaining the problems and solutions
to help future maintainers understand the reasoning.

Testing:
- All inventory tests pass (9 suites, 39 tests)
- ESLint passes on modified files
- Webpack compiles successfully
- Manual testing confirms zombie requests are eliminated
@matejkubinec matejkubinec merged commit f8be4f7 into v3 Jan 9, 2026
2 of 3 checks passed
@matejkubinec matejkubinec deleted the PMM-14640-ui-foc-observed-on-inventory-service-agents-page branch January 9, 2026 09:56
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants