Loader component added

Author: udaypydi

index.js

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

src/components/loader/loader.component.jsx

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

src/components/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); }
+}