Add React.lazy sample

Author: vadimkorr

.gitignore

@@ -21,3 +21,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+*.log

src/App.js

@@ -1,10 +1,14 @@
 import './App.css'
-import { Randomizer } from './Randomizer'
+//import { Randomizer } from './Randomizer'
+import {
+  // DashboardEager,
+  DashboardLazy,
+} from './Dashboard'
 
 function App() {
   return (
     <div className="App">
-      <Randomizer />
+      <DashboardLazy />
     </div>
   )
 }

src/Dashboard/DashboardEager/DashboardEager.css

@@ -0,0 +1,16 @@
+import React from 'react'
+import Item1 from '../shared/Item1'
+import Item2 from '../shared/Item2'
+import Item3 from '../shared/Item3'
+
+import './DashboardEager.css'
+
+export const DashboardEager = () => {
+  return (
+    <div>
+      <Item1 />
+      <Item2 />
+      <Item3 />
+    </div>
+  )
+}

src/Dashboard/DashboardEager/DashboardEager.js

@@ -0,0 +1 @@
+export * from './DashboardEager'

src/Dashboard/DashboardEager/index.js

@@ -0,0 +1,22 @@
+import React, { Suspense } from 'react'
+import './DashboardLazy.css'
+
+const Item1 = React.lazy(() => import('../shared/Item1'))
+const Item2 = React.lazy(() => import('../shared/Item2'))
+const Item3 = React.lazy(() => import('../shared/Item3'))
+
+export const DashboardLazy = () => {
+  return (
+    <div>
+      <Suspense fallback={<div>Загрузка...</div>}>
+        <Item1 />
+      </Suspense>
+      <Suspense fallback={<div>Загрузка...</div>}>
+        <Item2 />
+      </Suspense>
+      <Suspense fallback={<div>Загрузка...</div>}>
+        <Item3 />
+      </Suspense>
+    </div>
+  )
+}

src/Dashboard/DashboardLazy/DashboardLazy.css

@@ -0,0 +1 @@
+export * from './DashboardLazy'

src/Dashboard/DashboardLazy/DashboardLazy.js

@@ -0,0 +1,2 @@
+export { DashboardLazy } from './DashboardLazy'
+// export { DashboardEager } from './DashboardEager'