Merge pull request #21 from udaypydi/fix/lazy-load-components

Fix/lazy load components

Author: udaypydi

config/paths.js

@@ -3,7 +3,8 @@ const path = require('path');
 const paths = {
     entry: path.resolve(__dirname, '../index'),
     output: path.resolve(__dirname, '../build'),
-    template: path.resolve(__dirname, './template.html')
+    template: path.resolve(__dirname, './template.html'),
+    uielements: path.resolve(__dirname, '../src/uielements'),
 };
 
 

config/webpack.base.config.js

@@ -53,7 +53,10 @@ module.exports = function({ plugins }) {
             }),
         ],
         resolve: {
-            extensions: ['.js', 'jsx', '.scss', '.css']
+            extensions: ['.js', '.jsx', '.scss', '.css'],
+            alias: {
+                uielements: paths.uielements,
+            }
         },
     });
 }

index.js

@@ -1,5 +1,6 @@
-import React from 'react';
+import React, { Suspense } from 'react';
 import ReactDOM from 'react-dom';
-import App from './src/app.jsx';
+import Loader from 'uielements/loader/loader.component';
+const App = React.lazy(() => import('./src/app'));
 
-ReactDOM.render(<App />, document.getElementById('root'));
+ReactDOM.render(<Suspense fallback={<Loader />}><App /></Suspense>, document.getElementById('root'));

src/uielements/loader/loader.component.jsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import './loader.scss';
+
+export default function Loader() {
+  return (
+    <div className="Loader--Container">
+      <div className="Loader--Element" />
+    </div>
+  );
+}

src/uielements/loader/loader.scss

@@ -0,0 +1,20 @@
+.Loader--Container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+
+    .Loader--Element {
+        border: 16px solid #f3f3f3; /* Light grey */
+        border-top: 16px solid #3498db; /* Blue */
+        border-radius: 50%;
+        width: 30px;
+        height: 30px;
+        animation: spin 2s linear infinite;
+    }
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}