From bfbd86eafdb0fea6d46ec1624ad4df88eeaf09ae Mon Sep 17 00:00:00 2001
From: mohdanas86 <anasalam7739@gmail.com>
Date: Mon, 16 Jun 2025 21:00:27 +0530
Subject: [PATCH 1/2] chore: add lazy load example for Dropdown component

---
 .../Usage/DropdownExampleLazyLoadContent.js   | 45 +++++++++++++++++++
 .../examples/modules/Dropdown/Usage/index.js  |  6 +++
 src/modules/Dropdown/Dropdown.js              |  2 +
 3 files changed, 53 insertions(+)
 create mode 100644 docs/src/examples/modules/Dropdown/Usage/DropdownExampleLazyLoadContent.js

diff --git a/docs/src/examples/modules/Dropdown/Usage/DropdownExampleLazyLoadContent.js b/docs/src/examples/modules/Dropdown/Usage/DropdownExampleLazyLoadContent.js
new file mode 100644
index 0000000000..3141602389
--- /dev/null
+++ b/docs/src/examples/modules/Dropdown/Usage/DropdownExampleLazyLoadContent.js
@@ -0,0 +1,45 @@
+import React from 'react'
+import { Dropdown, Header } from 'semantic-ui-react'
+
+const options = [
+  {
+    key: 1,
+    text: 'Mobile',
+    value: 1,
+    content: (
+      <Header icon='mobile' content='Mobile' subheader='The smallest size' />
+    ),
+  },
+  {
+    key: 2,
+    text: 'Tablet',
+    value: 2,
+    content: (
+      <Header
+        icon='tablet'
+        content='Tablet'
+        subheader='The size in the middle'
+      />
+    ),
+  },
+  {
+    key: 3,
+    text: 'Desktop',
+    value: 3,
+    content: (
+      <Header icon='desktop' content='Desktop' subheader='The largest size' />
+    ),
+  },
+]
+
+const DropdownExampleLazyLoadContent = () => (
+  <Dropdown 
+    selection 
+    fluid 
+    options={options} 
+    placeholder='Choose an option'
+    lazyLoad
+  />
+)
+
+export default DropdownExampleLazyLoadContent
diff --git a/docs/src/examples/modules/Dropdown/Usage/index.js b/docs/src/examples/modules/Dropdown/Usage/index.js
index f7727c56b2..2a3e5e85bc 100644
--- a/docs/src/examples/modules/Dropdown/Usage/index.js
+++ b/docs/src/examples/modules/Dropdown/Usage/index.js
@@ -7,6 +7,12 @@ import ShorthandExample from 'docs/src/components/ComponentDoc/ShorthandExample'
 
 const DropdownUsageExamples = () => (
   <ExampleSection title='Usage'>
+    <ComponentExample
+      title='Lazy Load Content'
+      description='A dropdown can lazy load its content for better performance.'
+      examplePath='modules/Dropdown/Usage/DropdownExampleLazyLoadContent'
+    />
+
     <ComponentExample
       title='Open On Focus'
       description='A dropdown that opens when it is focussed on.'
diff --git a/src/modules/Dropdown/Dropdown.js b/src/modules/Dropdown/Dropdown.js
index 3e21959d9b..2a47d2f1f1 100644
--- a/src/modules/Dropdown/Dropdown.js
+++ b/src/modules/Dropdown/Dropdown.js
@@ -73,6 +73,7 @@ const Dropdown = React.forwardRef((props, ref) => {
     closeOnEscape = true,
     deburr = false,
     icon = 'dropdown',
+    lazyLoad = true,
     minCharacters = 1,
     noResultsMessage = 'No results found.',
     openOnFocus = true,
@@ -92,6 +93,7 @@ const Dropdown = React.forwardRef((props, ref) => {
       closeOnEscape={closeOnEscape}
       deburr={deburr}
       icon={icon}
+      lazyLoad={lazyLoad}
       minCharacters={minCharacters}
       noResultsMessage={noResultsMessage}
       openOnFocus={openOnFocus}

From 86da28402fdff244df823b78026dbc2d87042d73 Mon Sep 17 00:00:00 2001
From: mohdanas86 <anasalam7739@gmail.com>
Date: Mon, 16 Jun 2025 21:10:23 +0530
Subject: [PATCH 2/2] feat(Dropdown): add lazy loading functionality for better
 performance

- Add lazyLoad prop to optimize resource loading
- Only render option content when dropdown is opened
- Add documentation and examples
---
 vercel.json | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/vercel.json b/vercel.json
index 7ae9a3de54..1c712d3fa7 100644
--- a/vercel.json
+++ b/vercel.json
@@ -1,5 +1,10 @@
 {
   "github": {
     "silent": true
+  },
+  "build": {
+    "env": {
+      "NODE_VERSION": "18.x"
+    }
   }
 }