chore: add lazy load example for Dropdown component #4523
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Added lazy loading functionality to the Dropdown component to optimize performance when using complex content (like icons) in dropdown options.
Changes
Added new lazyLoad prop to the Dropdown component (defaults to true)
When enabled, option content is only rendered when the dropdown is opened
Prevents unnecessary network requests for icons and other resources until needed
Improves initial render performance for dropdowns with many options containing icons/complex content.
Problem Solved
Previously, when using Dropdown with items containing icons or complex content, all resources were loaded immediately on component mount, even when the dropdown was closed. This caused unnecessary network requests and potential performance issues, especially with large option lists.
Testing
Documentation
Breaking Changes
None. The feature is enabled by default but can be disabled via lazyLoad={false} prop if needed.