diff --git a/client/routes.jsx b/client/routes.jsx
index 26de7e4e6c..8a4575fc53 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`.
@@ -43,41 +49,49 @@ Route.propTypes = {
   component: PropTypes.elementType.isRequired
 };
 
+const Spinner = () => (
+  <div className="spinner-container">
+    <div className="spinner"></div>
+  </div>
+);
+
 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={<Spinner />}>
+    <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() {
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);
+  }
+}