index.tsx

import React, { Suspense } from 'react'
import ReactDOM from 'react-dom'
import { ThemeProvider } from 'styled-components/macro'
import 'i18n'

import getCurrentTheme from 'theme'
import GlobalStyle from 'globalStyles'
import App from './App'
import reportWebVitals from './reportWebVitals'
import Loading from 'components/loading'

function appRoot() {
  return (
    <>
      <React.StrictMode>
        <GlobalStyle />
        <Suspense fallback={<Loading />}>
          <ThemeProvider theme={getCurrentTheme()}>
            <App />
          </ThemeProvider>
        </Suspense>
      </React.StrictMode>
    </>
  )
}

ReactDOM.render(React.createElement(appRoot), document.getElementById('root'))

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals()