From e9f5dacb958c45af3379cc60253d73b931753b70 Mon Sep 17 00:00:00 2001
From: shiva <shiva_05@outlook.com>
Date: Wed, 26 Mar 2025 03:35:23 +0530
Subject: [PATCH 1/2] feat:added lazy loading

---
 client/routes.jsx | 104 +++++++++++++++++++++++++---------------------
 1 file changed, 56 insertions(+), 48 deletions(-)

diff --git a/client/routes.jsx b/client/routes.jsx
index 26de7e4e6c..10f0e1c9b5 100644
--- a/client/routes.jsx
+++ b/client/routes.jsx
@@ -1,25 +1,31 @@
 import PropTypes from 'prop-types';
-import React, { useEffect } from 'react';
+import React, { useEffect,lazy,Suspense} from 'react';
 import { useDispatch } from 'react-redux';
 import { Route as RouterRoute, Switch } from 'react-router-dom';
 
 import App from './modules/App/App';
-import IDEView from './modules/IDE/pages/IDEView';
-import FullView from './modules/IDE/pages/FullView';
-import About from './modules/About/pages/About';
-import CodeOfConduct from './modules/Legal/pages/CodeOfConduct';
-import PrivacyPolicy from './modules/Legal/pages/PrivacyPolicy';
-import TermsOfUse from './modules/Legal/pages/TermsOfUse';
-import LoginView from './modules/User/pages/LoginView';
-import SignupView from './modules/User/pages/SignupView';
-import ResetPasswordView from './modules/User/pages/ResetPasswordView';
-import EmailVerificationView from './modules/User/pages/EmailVerificationView';
-import NewPasswordView from './modules/User/pages/NewPasswordView';
-import AccountView from './modules/User/pages/AccountView';
-import CollectionView from './modules/User/pages/CollectionView';
-import DashboardView from './modules/User/pages/DashboardView';
 import { getUser } from './modules/User/actions';
 
+
+const IDEView = lazy(() => import('./modules/IDE/pages/IDEView'));
+const FullView = lazy(() => import('./modules/IDE/pages/FullView'));
+const About = lazy(() => import('./modules/About/pages/About'));
+const CodeOfConduct = lazy(() => import('./modules/Legal/pages/CodeOfConduct'));
+const PrivacyPolicy = lazy(() => import('./modules/Legal/pages/PrivacyPolicy'));
+const TermsOfUse = lazy(() => import('./modules/Legal/pages/TermsOfUse'));
+const LoginView = lazy(() => import('./modules/User/pages/LoginView'));
+const SignupView = lazy(() => import('./modules/User/pages/SignupView'));
+const ResetPasswordView = lazy(() => import('./modules/User/pages/ResetPasswordView'));
+const EmailVerificationView = lazy(() => import('./modules/User/pages/EmailVerificationView'));
+const NewPasswordView = lazy(() => import('./modules/User/pages/NewPasswordView'));
+const AccountView = lazy(() => import('./modules/User/pages/AccountView'));
+const CollectionView = lazy(() => import('./modules/User/pages/CollectionView'));
+const DashboardView = lazy(() => import('./modules/User/pages/DashboardView'));
+
+
+
+
+
 /**
  *  `params` is no longer a top-level route component prop in v4.
  *  It is a nested property of `match`.
@@ -44,40 +50,42 @@ Route.propTypes = {
 };
 
 const routes = (
-  <Switch>
-    <Route exact path="/" component={IDEView} />
-    <Route path="/login" component={LoginView} />
-    <Route path="/signup" component={SignupView} />
-    <Route
-      path="/reset-password/:reset_password_token"
-      component={NewPasswordView}
-    />
-    <Route path="/reset-password" component={ResetPasswordView} />
-    <Route path="/verify" component={EmailVerificationView} />
-    <Route path="/projects/:project_id" component={IDEView} />
-    <Route path="/:username/full/:project_id" component={FullView} />
-    <Route path="/full/:project_id" component={FullView} />
+  <Suspense fallback={<div>Loading...</div>}>
+    <Switch>
+      <Route exact path="/" component={IDEView} />
+      <Route path="/login" component={LoginView} />
+      <Route path="/signup" component={SignupView} />
+      <Route
+        path="/reset-password/:reset_password_token"
+        component={NewPasswordView}
+      />
+      <Route path="/reset-password" component={ResetPasswordView} />
+      <Route path="/verify" component={EmailVerificationView} />
+      <Route path="/projects/:project_id" component={IDEView} />
+      <Route path="/:username/full/:project_id" component={FullView} />
+      <Route path="/full/:project_id" component={FullView} />
 
-    <Route path="/:username/assets" component={DashboardView} />
-    <Route
-      path="/:username/sketches/:project_id/add-to-collection"
-      component={IDEView}
-    />
-    <Route path="/:username/sketches/:project_id" component={IDEView} />
-    <Route path="/:username/sketches" component={DashboardView} />
-    <Route
-      path="/:username/collections/:collection_id"
-      component={CollectionView}
-    />
-    <Route path="/:username/collections" component={DashboardView} />
-    <Route path="/sketches" component={DashboardView} />
-    <Route path="/assets" component={DashboardView} />
-    <Route path="/account" component={AccountView} />
-    <Route path="/about" component={About} />
-    <Route path="/privacy-policy" component={PrivacyPolicy} />
-    <Route path="/terms-of-use" component={TermsOfUse} />
-    <Route path="/code-of-conduct" component={CodeOfConduct} />
-  </Switch>
+      <Route path="/:username/assets" component={DashboardView} />
+      <Route
+        path="/:username/sketches/:project_id/add-to-collection"
+        component={IDEView}
+      />
+      <Route path="/:username/sketches/:project_id" component={IDEView} />
+      <Route path="/:username/sketches" component={DashboardView} />
+      <Route
+        path="/:username/collections/:collection_id"
+        component={CollectionView}
+      />
+      <Route path="/:username/collections" component={DashboardView} />
+      <Route path="/sketches" component={DashboardView} />
+      <Route path="/assets" component={DashboardView} />
+      <Route path="/account" component={AccountView} />
+      <Route path="/about" component={About} />
+      <Route path="/privacy-policy" component={PrivacyPolicy} />
+      <Route path="/terms-of-use" component={TermsOfUse} />
+      <Route path="/code-of-conduct" component={CodeOfConduct} />
+    </Switch>
+  </Suspense>
 );
 
 function Routing() {

From 8108ed669913118980ebdb8a4c56783f31ffd125 Mon Sep 17 00:00:00 2001
From: shiva <shiva_05@outlook.com>
Date: Wed, 26 Mar 2025 03:44:04 +0530
Subject: [PATCH 2/2] feat:added spinner

---
 client/routes.jsx                      |  8 +++++++-
 client/styles/components/_spinner.scss | 21 +++++++++++++++++++++
 2 files changed, 28 insertions(+), 1 deletion(-)
 create mode 100644 client/styles/components/_spinner.scss

diff --git a/client/routes.jsx b/client/routes.jsx
index 10f0e1c9b5..8a4575fc53 100644
--- a/client/routes.jsx
+++ b/client/routes.jsx
@@ -49,8 +49,14 @@ Route.propTypes = {
   component: PropTypes.elementType.isRequired
 };
 
+const Spinner = () => (
+  <div className="spinner-container">
+    <div className="spinner"></div>
+  </div>
+);
+
 const routes = (
-  <Suspense fallback={<div>Loading...</div>}>
+  <Suspense fallback={<Spinner />}>
     <Switch>
       <Route exact path="/" component={IDEView} />
       <Route path="/login" component={LoginView} />
diff --git a/client/styles/components/_spinner.scss b/client/styles/components/_spinner.scss
new file mode 100644
index 0000000000..da748fdaa2
--- /dev/null
+++ b/client/styles/components/_spinner.scss
@@ -0,0 +1,21 @@
+@use "sass:math"; 
+
+.spinner {
+  display: inline-block;
+  width: #{math.div(40, $base-font-size)}rem;
+  height: #{math.div(40, $base-font-size)}rem;
+  border: #{math.div(4, $base-font-size)}rem solid;
+  border-radius: 50%;
+  border-top-color: transparent;
+  animation: spin 1s linear infinite;
+  
+  @include themify() {
+    border-color: getThemifyVariable('primary-text-color');
+  }
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}