Lazyload SearchOrAskAiModal

Author: reakaleek

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

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>

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>
+        </>
     )
 }