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

🔺 14 failing tests on test run #2 ↗︎

❌ Failing	✅ Passing	↪️ Skipped	🕐 Duration
14 Failing	888 Passing	11 Skipped	67m 2s

Details

Failing Tests
	Spec	Test
❌	create-image.spec.ts	Cloud Manager Cypress Tests→create image (e2e) » create image from a linode
❌	images-non-empty-landing-page.spec.ts	Cloud Manager Cypress Tests→image landing checks for non-empty state with restricted user » checks restricted user with read access has no access to create image and can see existing images
❌	restricted-user-details-pages.spec.ts	Cloud Manager Cypress Tests→restricted user details pages » should disable action elements and buttons in the 'Images' details page
❌	images-empty-landing-page.spec.ts	Cloud Manager Cypress Tests→Images empty landing page » shows the empty state when there are no images
❌	images-empty-landing-page.spec.ts	Cloud Manager Cypress Tests→Images empty landing page » checks restricted user has no access to create Image on Image landing page
❌	object-storage.e2e.spec.ts	Cloud Manager Cypress Tests→object storage end-to-end tests » can update bucket access
❌	rebuild-linode.spec.ts	Cloud Manager Cypress Tests→rebuild linode » rebuilds a linode from Image
❌	rebuild-linode.spec.ts	Cloud Manager Cypress Tests→rebuild linode » rebuilds a linode from Community StackScript
❌	rebuild-linode.spec.ts	Cloud Manager Cypress Tests→rebuild linode » rebuilds a linode from Account StackScript
❌	rebuild-linode.spec.ts	Cloud Manager Cypress Tests→rebuild linode » cannot rebuild a provisioning linode
❌	rebuild-linode.spec.ts	Cloud Manager Cypress Tests→rebuild linode » can rebuild a Linode reusing existing user data
❌	rebuild-linode.spec.ts	Cloud Manager Cypress Tests→rebuild linode » can rebuild a linode with the GECKO is enabled
❌	smoke-create-image.spec.ts	Cloud Manager Cypress Tests→create image (using mocks) » create image from a linode
❌	create-linode-from-image.spec.ts	Cloud Manager Cypress Tests→create linode from image, mocked data » creates linode from image on images tab

Troubleshooting

Use this command to re-run the failing tests:

pnpm cy:run -s "cypress/e2e/core/images/create-image.spec.ts,cypress/e2e/core/images/images-non-empty-landing-page.spec.ts,cypress/e2e/core/account/restricted-user-details-pages.spec.ts,cypress/e2e/core/images/images-empty-landing-page.spec.ts,cypress/e2e/core/objectStorage/object-storage.e2e.spec.ts,cypress/e2e/core/linodes/rebuild-linode.spec.ts,cypress/e2e/core/images/smoke-create-image.spec.ts,cypress/e2e/core/images/create-linode-from-image.spec.ts"