Click here to Skip to main content
15,906,329 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I have a NAV header component called GlobalHeaderV2.tsx which has a Search component. Currently on page load both the components are being rendered increasing the page size.

Search Component renders the icon (Pic 1) and on click the auto complete suggestion (Pic 2). Icon needs to render on initial page load but the auto complete is not required until the user interaction.

Please guide me on how i can address this. Should i separate the icon and auto complete into its own component and then lazy load the auto complete?

Inside SearchComponentV2.tsx file

    export default function SearchComponentV2(props) {
    return (
        <ThemeProvider theme={theme}>
          {(!desktopSearchComponent) && <div className={classes.searchIconWidth} style={{ display: 'inline-flex'}}>
            <ListItem aria-label='Search directv.com' onClick={toggleDesktopSearch} button={true} className={`${classes.focusonbtn}`}>
              <ListItemIcon className={`${classes.collapsebtn}`} onClick={toggleDesktopSearch}>
                <span style={{display: 'inline-flex'}}>
                  {setSVGLogoAsset(isLightTheme?icons.SearchDarkIcon:icons.SearchIcon,classes.iconSize)}
                </span>
              </ListItemIcon>
            </ListItem>
            <Drawer anchor={'right'} open={drawerOpen} 
              style = {{zIndex:3000}}
              PaperProps={{
                style: {
                  alignItems: isMobile?'normal':'center',
                  width: isTablet?'100%':'50%',
                  paddingLeft: '20px',
                  paddingTop:'15px',
                  paddingRight:'10px',
                  height:'100%'
                }
              }}>
              {renderSearchComponent()} //Auto Complete Component
            </Drawer>
          </div>}
        </ThemeProvider>
    }

Inside GlobalHeaderV2.tsx file 

    import SearchComponentV2 from "../search-app/src/SearchComponentV2";
    
    const createLayout = (data: any, logoData?: any, langSupport?: any) => {
          !data?.left?.length && raiseError('LAYOUT-LEFT-CREATELAYOUT');
          !data?.right?.length && raiseError('LAYOUT-RIGHT-CREATELAYOUT');
          return (!props.skinnyGnav && (
            <List
              component="nav"
              role="navigation"
              aria-label="Main Menu"
              data-testid={`header-main-list_${genUniqueUUid(10)}`}
              className={`${classes.inlineFlex} ${classes.desktop}`} style={{ display: 'flex', alignItems: 'center', width: '100%', height: '100%', paddingBottom: (navData?.options?.styles?.menuContainerPadBottom ? navData?.options?.styles?.menuContainerPadBottom : null) }}
            >
              <div className={`${classes.desktop} ${classes.marRt12} `} style={{ display: 'inline-flex', alignItems: 'center' }} >
    
                {data.right != undefined && data.right.length && createLeftRightTopMenus(data.right, 'right')}
                {(navData.options && navData.options.showSearch) ?
                  <div className={classes.searchBarStyles}>
                    <div style={{ display: 'inline-flex', width: '95%', fontFamily: 'PFDinReg', justifyContent: 'flex-end' }}>
                    <SearchComponentV2 isLightTheme={isLightTheme} caps={navData.options.topLevelCaps} drawerIsOpen={drawerIsOpen} updateSearchIsOpen={updateSearchIsOpen} />
                    </div>
                  </div>
                  : <div className={classes.searchBarStyles} />
                }
              </div>
              {(navData.options && navData.options.enableLangSupport) ? showLangLinks(langSupport) : ''}
            </List>)
          );
        }
    ————— Return ——————————————
    
    return (
       <React.Fragment>
         <Toolbar className={`${isLightTheme ? classes.bgLight : classes.bgDark}` + ' ' + classes.mainMenuBarPadding + ' ' + classes.root + classes.root + ' ' + classes.toolBar}>
                                  {BuildIcon(isLightTheme ? navData.lightLogo : navData.logo, ((navData.options && navData.options.overrideMobileMenu && navData.options.alternateSVG)) ? (isLightTheme ? navData.options.alternateSVGLight : navData.options.alternateSVG) : null)}
                                  {!isLefOrRight ?
                                    TopLevelMenu((props && props.isAuth) ? navData.auth : (navData.recog && props.recognised ? navData.recog : navData.unauth))
                                    :
                                    createLayout((props && props.isAuth) ? navData.auth : (navData.recog && props.recognised ? navData.recog : navData.unauth),
                                      navData.logo, navData.options && navData.options.enableLangSupport ? langSupport : null)}
                                </Toolbar>
        
         </React.Fragment>
        )

  [1]: https://i.stack.imgur.com/KZ0Vt.png
  [2]: https://i.stack.imgur.com/eq5rB.png


What I have tried:

My guess is i need to split the icon and the autocomplete into its own components and lazy load the auto complete part
Posted
Updated 9-Sep-22 19:59pm
v2

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900