Lazy loading des composants
This commit is contained in:
parent
8fc22a92d8
commit
c1ae173799
31
src/App.js
31
src/App.js
@ -1,20 +1,31 @@
|
|||||||
import './App.css';
|
import './App.css';
|
||||||
import './_sass/index.scss';
|
import './_sass/index.scss';
|
||||||
|
|
||||||
import MenuComponent from './components/MenuComponent/index';
|
import { lazy, Suspense } from 'react';
|
||||||
import MainCard from './components/MainCard/MainCard';
|
|
||||||
import ProjectsCard from './components/ProjectsCard';
|
|
||||||
import ContactCard from './components/ContactCard';
|
const MenuComponent = lazy(() => import('./components/MenuComponent/index'));
|
||||||
import FooterCard from './components/FooterCard';
|
const MainCard = lazy(() => import('./components/MainCard/MainCard'));
|
||||||
|
const ProjectsCard = lazy(() => import('./components/ProjectsCard'));
|
||||||
|
const ContactCard = lazy(() => import('./components/ContactCard'));
|
||||||
|
const FooterCard = lazy(() => import('./components/FooterCard'));
|
||||||
|
|
||||||
|
const renderLoader = () => <p>Loading</p>;
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
return (
|
return (
|
||||||
<div className="App">
|
<div className="App">
|
||||||
<MenuComponent/>
|
<Suspense fallback={renderLoader()}>
|
||||||
<MainCard/>
|
<MenuComponent />
|
||||||
<ProjectsCard/>
|
</Suspense>
|
||||||
<ContactCard/>
|
<Suspense fallback={renderLoader()}>
|
||||||
<FooterCard/>
|
<MainCard />
|
||||||
|
</Suspense>
|
||||||
|
<Suspense fallback={renderLoader()}>
|
||||||
|
<ProjectsCard />
|
||||||
|
<ContactCard />
|
||||||
|
<FooterCard />
|
||||||
|
</Suspense>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user