fix: Keep state of chat/search by hidding it with styles only

oramasearch · Jul 11, 2024 · eb17391 · eb17391
1 parent 431bc84
commit eb17391
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 3 deletions.
diff --git a/packages/ui-stencil-vue/lib/components.ts b/packages/ui-stencil-vue/lib/components.ts
@@ -61,7 +61,9 @@ export const OramaTextarea = /*@__PURE__*/ defineContainer<JSX.OramaTextarea>('o
 ]);
 
 
-export const OramaToggler = /*@__PURE__*/ defineContainer<JSX.OramaToggler>('orama-toggler', undefined);
+export const OramaToggler = /*@__PURE__*/ defineContainer<JSX.OramaToggler>('orama-toggler', undefined, [
+  'performInitialAnimation'
+]);
 
 
 export const SearchBox = /*@__PURE__*/ defineContainer<JSX.SearchBox>('search-box', undefined, [

diff --git a/packages/ui-stencil/src/components.d.ts b/packages/ui-stencil/src/components.d.ts
@@ -61,6 +61,7 @@ export namespace Components {
         "value": string | null;
     }
     interface OramaToggler {
+        "performInitialAnimation": boolean;
     }
     interface SearchBox {
         "color": 'dark' | 'light' | 'system';
@@ -222,6 +223,7 @@ declare namespace LocalJSX {
         "value"?: string | null;
     }
     interface OramaToggler {
+        "performInitialAnimation"?: boolean;
     }
     interface SearchBox {
         "color"?: 'dark' | 'light' | 'system';

diff --git a/packages/ui-stencil/src/components/search-box/search-box.tsx b/packages/ui-stencil/src/components/search-box/search-box.tsx
@@ -41,8 +41,9 @@ export class SearchBox {
         >
           <orama-toggler />
         </div>
-        {/* TODO: How to lazily load components chat component as it won't necessarily be used */}
-        {globalContext.selectedTab === 'search' ? <orama-search /> : <orama-chat />}
+
+        <orama-search style={{ display: globalContext.selectedTab === 'search' ? 'flex' : 'none' }} />
+        <orama-chat style={{ display: globalContext.selectedTab === 'chat' ? 'flex' : 'none' }} />
       </Host>
     )
   }