From 6c27bf2c4edfa45ccf32cf39bddc70c2f95c1e6e Mon Sep 17 00:00:00 2001
From: Jan Calanog <jan.calanog@elastic.co>
Date: Mon, 28 Jul 2025 16:59:58 +0200
Subject: [PATCH 1/3] Lazyload `SearchOrAskAiModal`

---
 src/Elastic.Documentation.Site/.gitignore     |  8 ++-----
 .../SearchOrAskAi/SearchOrAskAiButton.tsx     | 23 ++++++++++++++++---
 .../SearchOrAskAi/SearchOrAskAiModal.tsx      |  9 ++------
 3 files changed, 24 insertions(+), 16 deletions(-)

diff --git a/src/Elastic.Documentation.Site/.gitignore b/src/Elastic.Documentation.Site/.gitignore
index 919143418..e7a86be8c 100644
--- a/src/Elastic.Documentation.Site/.gitignore
+++ b/src/Elastic.Documentation.Site/.gitignore
@@ -1,11 +1,7 @@
 .parcel-cache/
 node_modules/
-_static/main.js
-_static/main.js.map
-_static/custom-elements.js
-_static/custom-elements.js.map
-_static/pages-nav.js
-_static/pages-nav.js.map
 _static/styles.css
 _static/styles.css.map
 _static/*.woff2
+_static/*.js
+_static/*.js.map
diff --git a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/SearchOrAskAiButton.tsx b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/SearchOrAskAiButton.tsx
index 0006f0845..fba09b697 100644
--- a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/SearchOrAskAiButton.tsx
+++ b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/SearchOrAskAiButton.tsx
@@ -1,5 +1,5 @@
+/** @jsxImportSource @emotion/react */
 import '../../eui-icons-cache'
-import { SearchOrAskAiModal } from './SearchOrAskAiModal'
 import { useModalActions, useModalIsOpen } from './modal.store'
 import { useSearchActions, useSearchTerm } from './search.store'
 import {
@@ -10,10 +10,14 @@ import {
     EuiPanel,
     EuiTextTruncate,
     EuiText,
+    EuiLoadingSpinner,
 } from '@elastic/eui'
 import { css } from '@emotion/react'
 import * as React from 'react'
-import { useEffect } from 'react'
+import { useEffect, Suspense, lazy } from 'react'
+
+// Lazy load the modal component
+const SearchOrAskAiModal = lazy(() => import('./SearchOrAskAiModal').then(module => ({ default: module.SearchOrAskAiModal })))
 
 export const SearchOrAskAiButton = () => {
     const searchTerm = useSearchTerm()
@@ -30,6 +34,13 @@ export const SearchOrAskAiButton = () => {
         max-width: 100%;
     `
 
+    const loadingCss = css`
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding: 2rem;
+    `
+
     useEffect(() => {
         const handleKeydown = (event: KeyboardEvent) => {
             if (event.key === 'Escape') {
@@ -81,7 +92,13 @@ export const SearchOrAskAiButton = () => {
                     <EuiOverlayMask>
                         <EuiFocusTrap onClickOutside={closeModal}>
                             <EuiPanel role="dialog" css={positionCss}>
-                                <SearchOrAskAiModal />
+                                <Suspense fallback={
+                                    <div css={loadingCss}>
+                                        <EuiLoadingSpinner size="xl"  />
+                                    </div>
+                                }>
+                                    <SearchOrAskAiModal />
+                                </Suspense>
                             </EuiPanel>
                         </EuiFocusTrap>
                     </EuiOverlayMask>
diff --git a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/SearchOrAskAiModal.tsx b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/SearchOrAskAiModal.tsx
index 2580133af..d1dd2dbd1 100644
--- a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/SearchOrAskAiModal.tsx
+++ b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/SearchOrAskAiModal.tsx
@@ -20,12 +20,7 @@ export const SearchOrAskAiModal = () => {
     const { setSearchTerm, submitAskAiTerm } = useSearchActions()
 
     return (
-        <EuiPanel
-            css={css`
-                max-height: 80vh;
-                overflow: hidden;
-            `}
-        >
+        <>
             <EuiFieldSearch
                 fullWidth
                 placeholder="Search the docs or ask Elastic Docs AI Assistant"
@@ -61,6 +56,6 @@ export const SearchOrAskAiModal = () => {
                     This feature is in beta. Got feedback? We'd love to hear it!
                 </EuiText>
             </div>
-        </EuiPanel>
+        </>
     )
 }

From f7ea5bf931833a1bac27afd32a14607162e41f4a Mon Sep 17 00:00:00 2001
From: Jan Calanog <jan.calanog@elastic.co>
Date: Mon, 28 Jul 2025 17:03:51 +0200
Subject: [PATCH 2/3] Run prettier

---
 .../SearchOrAskAi/SearchOrAskAiButton.tsx      | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/SearchOrAskAiButton.tsx b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/SearchOrAskAiButton.tsx
index fba09b697..23ab5b61c 100644
--- a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/SearchOrAskAiButton.tsx
+++ b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/SearchOrAskAiButton.tsx
@@ -17,7 +17,11 @@ import * as React from 'react'
 import { useEffect, Suspense, lazy } from 'react'
 
 // Lazy load the modal component
-const SearchOrAskAiModal = lazy(() => import('./SearchOrAskAiModal').then(module => ({ default: module.SearchOrAskAiModal })))
+const SearchOrAskAiModal = lazy(() =>
+    import('./SearchOrAskAiModal').then((module) => ({
+        default: module.SearchOrAskAiModal,
+    }))
+)
 
 export const SearchOrAskAiButton = () => {
     const searchTerm = useSearchTerm()
@@ -92,11 +96,13 @@ export const SearchOrAskAiButton = () => {
                     <EuiOverlayMask>
                         <EuiFocusTrap onClickOutside={closeModal}>
                             <EuiPanel role="dialog" css={positionCss}>
-                                <Suspense fallback={
-                                    <div css={loadingCss}>
-                                        <EuiLoadingSpinner size="xl"  />
-                                    </div>
-                                }>
+                                <Suspense
+                                    fallback={
+                                        <div css={loadingCss}>
+                                            <EuiLoadingSpinner size="xl" />
+                                        </div>
+                                    }
+                                >
                                     <SearchOrAskAiModal />
                                 </Suspense>
                             </EuiPanel>

From b0ed78ce8060e8d4361f9d8aefa4e6471d11cae3 Mon Sep 17 00:00:00 2001
From: Jan Calanog <jan.calanog@elastic.co>
Date: Mon, 28 Jul 2025 17:06:37 +0200
Subject: [PATCH 3/3] Fix import

---
 .../Assets/web-components/SearchOrAskAi/SearchOrAskAiModal.tsx   | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/SearchOrAskAiModal.tsx b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/SearchOrAskAiModal.tsx
index d1dd2dbd1..ed4d91c3b 100644
--- a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/SearchOrAskAiModal.tsx
+++ b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/SearchOrAskAiModal.tsx
@@ -3,7 +3,6 @@ import { Suggestions } from './Suggestions'
 import { useAskAiTerm, useSearchActions, useSearchTerm } from './search.store'
 import {
     EuiFieldSearch,
-    EuiPanel,
     EuiSpacer,
     EuiBetaBadge,
     EuiText,