import React from 'react';
import ReactDOM from 'react-dom';
import LazyLoad from 'react-dom-lazyload-component';
import { Header, Main, Loading } from './MyComponents';

const Footer = React.lazy(() => import('./MyComponents'))

const App = () => (
    <>
        <Header />
        <Main />
        {/* Footer is not needed to be rendered first. */}
        {/* This will optimize Core Web Vitals */}
        <LazyLoad
          as='footer'
          fallback={<Loading />}
          direction='vertical'
          margin='200px'
          suspense
        >
          <Footer />
        </LazyLoad>
    </>
)

ReactDOM.render(<App />, document.body);