upcoming: [DPS-42065] - Add virtualization in CloudPulseResourcesSelect dropdown, Loading indicator in CloudPulse Metrics

[venkymano-akamai]

Description 📝

Adds virtualized list rendering for large datasets and delayed loading indicators to improve performance and provide better user feedback during long-running operations

These changes address performance issues when loading large numbers of CloudPulse resources (100+ items) and improve the overall user experience by providing clearer feedback during extended loading times.

Changes 🔄

• Added react-window library (v2.2.7) for efficient virtualized list rendering
• Created VirtualizedListbox component that only renders visible items in large lists (threshold: 100+ items)
• Implemented optimized filtering with createFilterOptions that limits search results to 1300 items
• Created useDelayedLoadingIndicator custom hook to show loading messages only after configurable delays (5s/10s)
• Created DelayedLoadingMessage component to inform users about extended loading times
• Integrated delayed loading indicators in:
• AlertsResources component (10s delay)
• CloudPulseDashboardFilterBuilder component (10s delay)
• Applied virtualization to CloudPulseResourcesSelect for autocomplete dropdowns with 100+ options

Scope 🚢

Upon production release, changes in this PR will be visible to:

• All customers
• Some customers (e.g. in Beta or Limited Availability)
• No customers / Not applicable

Target release date 🗓️ Next Release Date

Preview 📷

Virtualisation_Video.webm

How to test 🧪

• Login into Cloud Manager Application (use devcloud environment)
• Enable legacy MSW handlers
• In the server handler file, while returning linode/instances, add an await sleep(20000)
• In the same linode/instances, while constructing onlineLinodes, return 4000 instead of 40
• Navigate to Monitor and then to metrics
• Select Linode Dashboard
• You should see a loading indicator message
• After load, select region 'chicago', the CloudPulseResourcesSelect works seemlessly with 4000 instances.

Author Checklists

As an Author, to speed up the review process, I considered 🤔

👀 Doing a self review
❔ Our contribution guidelines
🤏 Splitting feature into small PRs
➕ Adding a changeset
🧪 Providing/improving test coverage
🔐 Removing all sensitive information from the code and PR description
🚩 Using a feature flag to protect the release
👣 Providing comprehensive reproduction steps
📑 Providing or updating our documentation
🕛 Scheduling a pair reviewing session
📱 Providing mobile support
♿ Providing accessibility support

• I have read and considered all applicable items listed above.

As an Author, before moving this PR from Draft to Open, I confirmed ✅

• All tests and CI checks are passing
• TypeScript compilation succeeded without errors
• Code passes all linting rules

[linode-gh-bot]

Cloud Manager UI test results

🔺 1 failing test on test run #8 ↗︎

❌ Failing	✅ Passing	↪️ Skipped	🕐 Duration
1 Failing	901 Passing	11 Skipped	40m 26s

Details

Failing Tests
	Spec	Test
❌	object-storage.e2e.spec.ts	Cloud Manager Cypress Tests→object storage end-to-end tests » can update bucket access

Troubleshooting

Use this command to re-run the failing tests:

pnpm cy:run -s "cypress/e2e/core/objectStorage/object-storage.e2e.spec.ts"