Semantic-UI-React
Semantic-UI-React copied to clipboard
chore: add lazy load example for Dropdown component
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
- Verified that icons load only when dropdown is opened
- Confirmed dropdown functionality remains unchanged
- Tested with both simple and complex content options
- Verified backward compatibility (existing dropdowns work as before)
Documentation
- Added prop documentation
- Updated TypeScript definitions
- Added example demonstrating the feature
Breaking Changes None. The feature is enabled by default but can be disabled via lazyLoad={false} prop if needed.
💖 Thanks for opening this pull request! 💖
Here is a list of things that will help get it across the finish line:
- Run
yarn lintlocally to catch formatting errors. This will fix some errors automatically, commit and push any changes. - Run
yarn testlocally to catch errors. This ensures all components still behave as they should. - Run
yarn startto run the doc site locally and try a few pages, ensuring everything is in good working order. - Include tests when adding/changing behavior.
We get a lot of pull requests on this repo, so please be patient and we will get back to you as soon as we can.
The latest updates on your projects. Learn more about Vercel for Git ↗︎
| Name | Status | Preview | Comments | Updated (UTC) |
|---|---|---|---|---|
| semantic-ui-react | ❌ Failed (Inspect) | Jun 16, 2025 3:35pm |