Repository: h2oai/wave
File: ui/src/app.tsx (TypeScript)

Code before:
      )

    return { render }
  }),
  App = bond(() => {
    const
      onHashChanged = () => wave.push(),
      onMdLinkClick = ({ detail }: any) => {
        wave.args[detail] = true
        wave.push()
      },
      init = () => {
        listen(wave.socketURL)
        window.addEventListener('hashchange', onHashChanged)
        window.addEventListener('md-link-click', onMdLinkClick)
      },
      render = () => {
        const e = contentB()
        if (e) {
          switch (e.t) {
            case WaveEventType.Page:
              {
                const page = e.page
                const lightbox = lightboxB()
                return (
                  <Fluent.ThemeProvider theme={{ components: componentCustomStyles }}>
                    <div className={css.app}>
                      <PageLayout key={page.key} page={page} />
                      <BusyOverlay />
                      <Dialog />
                      <SidePanel />
                      <NotificationBar />
                      {lightbox && <Lightbox {...lightbox} />}
                    </div>
                  </Fluent.ThemeProvider>
                )
              }
            case WaveEventType.Error:
              {
                // TODO better sadface
                const message = e.code === WaveErrorCode.PageNotFound ? <NotFoundOverlay /> : 'Unknown Remote Error'
                return <div className={clas(css.centerFullHeight, css.app)}>{message}</div>
              }
            case WaveEventType.Exception:
              {
                // TODO better sadface
                const message = `Unhandled exception: ${e.error}`
                return <div className={clas(css.centerFullHeight, css.app)}>{message}</div>
              }
            case WaveEventType.Disconnect:
              {

Review comment (suggestion):
Use a file-scoped const instead to improve perf as suggested in Fluent docs:

<img width="1029" alt="image" src="https://user-images.githubusercontent.com/64769322/203485523-25ee2a7e-7f3c-40ef-94a0-a0466442ff4a.png">


Code after:
          )}
        </div>
      )

    return { render }
  }),
  App = bond(() => {
    const
      onHashChanged = () => wave.push(),
      onMdLinkClick = ({ detail }: any) => {
        wave.args[detail] = true
        wave.push()
      },
      init = () => {
        listen(wave.socketURL)
        window.addEventListener('hashchange', onHashChanged)
        window.addEventListener('md-link-click', onMdLinkClick)
      },
      render = () => {
        const e = contentB()
        if (e) {
          switch (e.t) {
            case WaveEventType.Page:
              {
                const page = e.page
                const lightbox = lightboxB()
                return (
                  <Fluent.ThemeProvider theme={customStyles}>
                    <div className={css.app}>
                      <PageLayout key={page.key} page={page} />
                      <BusyOverlay />
                      <Dialog />
                      <SidePanel />
                      <NotificationBar />
                      {lightbox && <Lightbox {...lightbox} />}
                    </div>
                  </Fluent.ThemeProvider>
                )
              }
            case WaveEventType.Error:
              {
                // TODO better sadface
                const message = e.code === WaveErrorCode.PageNotFound ? <NotFoundOverlay /> : 'Unknown Remote Error'
                return <div className={clas(css.centerFullHeight, css.app)}>{message}</div>
              }
            case WaveEventType.Exception:
              {
                // TODO better sadface
                const message = `Unhandled exception: ${e.error}`
                return <div className={clas(css.centerFullHeight, css.app)}>{message}</div>
              }