Skip to content

chore: add lazy load example for Dropdown component #4523

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

mohdanas86
Copy link

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.

Copy link

welcome bot commented Jun 16, 2025

💖 Thanks for opening this pull request! 💖

Here is a list of things that will help get it across the finish line:

  • Run yarn lint locally to catch formatting errors. This will fix some errors automatically, commit and push any changes.
  • Run yarn test locally to catch errors. This ensures all components still behave as they should.
  • Run yarn start to 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.

Copy link

vercel bot commented Jun 16, 2025

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

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.

1 participant