Reduce page chunk size by loading the component only that is required

See more:

ReactJS

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