Refactor: Add LazyPage Component for Lazy Loading of Pages & update dependcies

This commit is contained in:
prafull-opensignlabs
2024-03-20 11:11:37 +05:30
parent 04b2c7c4da
commit 24773759c2
6 changed files with 143 additions and 90 deletions
+8 -8
View File
@@ -56,7 +56,7 @@
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-react": "^7.34.1",
"lint-staged": "^15.2.2",
"postcss": "^8.4.36",
"postcss": "^8.4.37",
"prettier": "^2.8.8",
"pretty-quick": "^3.3.1",
"tailwindcss": "^3.4.1"
@@ -17571,9 +17571,9 @@
}
},
"node_modules/postcss": {
"version": "8.4.36",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.36.tgz",
"integrity": "sha512-/n7eumA6ZjFHAsbX30yhHup/IMkOmlmvtEi7P+6RMYf+bGJSUHc3geH4a0NSZxAz/RJfiS9tooCTs9LAVYUZKw==",
"version": "8.4.37",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.37.tgz",
"integrity": "sha512-7iB/v/r7Woof0glKLH8b1SPHrsX7uhdO+Geb41QpF/+mWZHU3uxxSlN+UXGVit1PawOYDToO+AbZzhBzWRDwbQ==",
"funding": [
{
"type": "opencollective",
@@ -17591,7 +17591,7 @@
"dependencies": {
"nanoid": "^3.3.7",
"picocolors": "^1.0.0",
"source-map-js": "^1.1.0"
"source-map-js": "^1.2.0"
},
"engines": {
"node": "^10 || ^12 || >=14"
@@ -21343,9 +21343,9 @@
}
},
"node_modules/source-map-js": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.1.0.tgz",
"integrity": "sha512-9vC2SfsJzlej6MAaMPLu8HiBSHGdRAJ9hVFYN1ibZoNkeanmDmLUcIrj6G9DGL7XMJ54AKg/G75akXl1/izTOw==",
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
"integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
"engines": {
"node": ">=0.10.0"
}
+1 -1
View File
@@ -86,7 +86,7 @@
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-react": "^7.34.1",
"lint-staged": "^15.2.2",
"postcss": "^8.4.36",
"postcss": "^8.4.37",
"prettier": "^2.8.8",
"pretty-quick": "^3.3.1",
"tailwindcss": "^3.4.1"
+94 -71
View File
@@ -9,13 +9,12 @@ import HomeLayout from "./layout/HomeLayout";
import PageNotFound from "./pages/PageNotFound";
import ValidateRoute from "./primitives/ValidateRoute";
import Validate from "./primitives/Validate";
import ManageSign from "./pages/Managesign";
import TemplatePlaceholder from "./pages/TemplatePlaceholder";
import SignYourSelf from "./pages/SignyourselfPdf";
import DraftDocument from "./components/pdf/DraftDocument";
import PlaceHolderSign from "./pages/PlaceHolderSign";
import PdfRequestFiles from "./pages/PdfRequestFiles";
import Opensigndrive from "./pages/Opensigndrive";
import LazyPage from "./primitives/LazyPage";
const DebugPdf = lazy(() => import("./pages/DebugPdf"));
const ForgetPassword = lazy(() => import("./pages/ForgetPassword"));
const GuestLogin = lazy(() => import("./pages/GuestLogin"));
@@ -24,6 +23,8 @@ const Subscriptions = lazy(() => import("./pages/PlanSubscriptions"));
const ChangePassword = lazy(() => import("./pages/ChangePassword"));
const UserProfile = lazy(() => import("./pages/UserProfile"));
const Signup = lazy(() => import("./pages/Signup"));
const Opensigndrive = lazy(() => import("./pages/Opensigndrive"));
const ManageSign = lazy(() => import("./pages/Managesign"));
const GenerateToken = lazy(() => import("./pages/GenerateToken"));
const Webhook = lazy(() => import("./pages/Webhook"));
pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;
@@ -78,83 +79,105 @@ function App() {
<Loader />
) : (
<BrowserRouter>
<Suspense fallback={<Loader />}>
<Routes>
<Route element={<ValidateRoute />}>
<Route exact path="/" element={<Login />} />
<Route exact path="/signup" element={<Signup />} />
</Route>
<Route element={<Validate />}>
<Route
path="/load/template/:templateId"
element={<TemplatePlaceholder />}
/>
<Route
exact
path="/load/placeholdersign/:docId"
element={<PlaceHolderSign />}
/>
<Route
exact
path="/load/recipientSignPdf/:docId/:contactBookId"
element={<PdfRequestFiles />}
/>
</Route>
<Routes>
<Route element={<ValidateRoute />}>
<Route exact path="/" element={<Login />} />
<Route path="/signup" element={<LazyPage Page={Signup} />} />
</Route>
<Route element={<Validate />}>
<Route
path="/loadmf/signmicroapp/login/:id/:userMail/:contactBookId/:serverUrl"
element={<GuestLogin />}
path="/load/template/:templateId"
element={<TemplatePlaceholder />}
/>
<Route
path="/login/:id/:userMail/:contactBookId/:serverUrl"
element={<GuestLogin />}
exact
path="/load/placeholdersign/:docId"
element={<PlaceHolderSign />}
/>
<Route path="/debugpdf" element={<DebugPdf />} />
<Route path="/forgetpassword" element={<ForgetPassword />} />
{process.env.REACT_APP_ENABLE_SUBSCRIPTION && (
<>
<Route exact path="/pgsignup" element={<Pgsignup />} />
<Route path="/subscription" element={<Subscriptions />} />
</>
)}
<Route element={<HomeLayout />}>
<Route path="/changepassword" element={<ChangePassword />} />
<Route path="/form/:id" element={<Form />} />
<Route path="/report/:id" element={<Report />} />
<Route path="/dashboard/:id" element={<Dashboard />} />
<Route path="/profile" element={<UserProfile />} />
<Route path="/generatetoken" element={<GenerateToken />} />
<Route path="/webhook" element={<Webhook />} />
<Route path="/managesign" element={<ManageSign />} />
<Route path="/opensigndrive" element={<Opensigndrive />} />
<Route
exact
path="/load/recipientSignPdf/:docId/:contactBookId"
element={<PdfRequestFiles />}
/>
</Route>
<Route
path="/loadmf/signmicroapp/login/:id/:userMail/:contactBookId/:serverUrl"
element={<LazyPage Page={GuestLogin} />}
/>
<Route
path="/login/:id/:userMail/:contactBookId/:serverUrl"
element={<LazyPage Page={GuestLogin} />}
/>
<Route path="/debugpdf" element={<LazyPage Page={DebugPdf} />} />
<Route
path="/forgetpassword"
element={<LazyPage Page={ForgetPassword} />}
/>
{process.env.REACT_APP_ENABLE_SUBSCRIPTION && (
<>
<Route
path="/template/:templateId"
element={<TemplatePlaceholder />}
path="/pgsignup"
element={<LazyPage Page={Pgsignup} />}
/>
{/* signyouself route with no rowlevel data using docId from url */}
<Route path="/signaturePdf/:docId" element={<SignYourSelf />} />
{/* draft document route to handle and navigate route page accordiing to document status */}
<Route path="/draftDocument" element={<DraftDocument />} />
{/* recipient placeholder set route with no rowlevel data using docId from url*/}
<Route
path="/placeHolderSign/:docId"
element={<PlaceHolderSign />}
path="/subscription"
element={<LazyPage Page={Subscriptions} />}
/>
{/* for user signature (need your sign route) with row level data */}
<Route path="/pdfRequestFiles" element={<PdfRequestFiles />} />
{/* for user signature (need your sign route) with no row level data */}
<Route
path="/pdfRequestFiles/:docId"
element={<PdfRequestFiles />}
/>
{/* recipient signature route with no rowlevel data using docId from url */}
<Route
path="/recipientSignPdf/:docId/:contactBookId"
element={<PdfRequestFiles />}
/>
</Route>
<Route path="*" element={<PageNotFound />} />
</Routes>
</Suspense>
</>
)}
<Route element={<HomeLayout />}>
<Route
path="/changepassword"
element={<LazyPage Page={ChangePassword} />}
/>
<Route path="/form/:id" element={<Form />} />
<Route path="/report/:id" element={<Report />} />
<Route path="/dashboard/:id" element={<Dashboard />} />
<Route
path="/profile"
element={<LazyPage Page={UserProfile} />}
/>
<Route
path="/opensigndrive"
element={<LazyPage Page={Opensigndrive} />}
/>
<Route
path="/managesign"
element={<LazyPage Page={ManageSign} />}
/>
<Route
path="/generatetoken"
element={<LazyPage Page={GenerateToken} />}
/>
<Route path="/webhook" element={<LazyPage Page={Webhook} />} />
<Route
path="/template/:templateId"
element={<TemplatePlaceholder />}
/>
{/* signyouself route with no rowlevel data using docId from url */}
<Route path="/signaturePdf/:docId" element={<SignYourSelf />} />
{/* draft document route to handle and navigate route page accordiing to document status */}
<Route path="/draftDocument" element={<DraftDocument />} />
{/* recipient placeholder set route with no rowlevel data using docId from url*/}
<Route
path="/placeHolderSign/:docId"
element={<PlaceHolderSign />}
/>
{/* for user signature (need your sign route) with row level data */}
<Route path="/pdfRequestFiles" element={<PdfRequestFiles />} />
{/* for user signature (need your sign route) with no row level data */}
<Route
path="/pdfRequestFiles/:docId"
element={<PdfRequestFiles />}
/>
{/* recipient signature route with no rowlevel data using docId from url */}
<Route
path="/recipientSignPdf/:docId/:contactBookId"
element={<PdfRequestFiles />}
/>
</Route>
<Route path="*" element={<PageNotFound />} />
</Routes>
</BrowserRouter>
)}
</div>
+30
View File
@@ -0,0 +1,30 @@
import React, { Suspense } from "react";
const LazyPage = ({ Page }) => {
return (
<Suspense
fallback={
<div
style={{
height: "100vh",
display: "flex",
alignItems: "center",
justifyContent: "center"
}}
>
<div
style={{
fontSize: "45px",
color: "#3dd3e0"
}}
className="loader-37"
></div>
</div>
}
>
<Page />
</Suspense>
);
};
export default LazyPage;
+8 -8
View File
@@ -9,7 +9,7 @@
"version": "1.4.0",
"license": "MIT",
"dependencies": {
"aws-sdk": "^2.1579.0",
"aws-sdk": "^2.1581.0",
"axios": "^1.6.8",
"cors": "^2.8.5",
"dotenv": "^16.4.5",
@@ -27,7 +27,7 @@
"nodemailer": "^6.9.12",
"parse": "^5.0.0",
"parse-dbtool": "^1.2.0",
"parse-server": "^6.4.0",
"parse-server": "^6.5.5",
"parse-server-api-mail-adapter": "^3.1.1",
"parse-server-fs-adapter": "^1.0.1",
"parse-server-s3-adapter": "^1.2.0",
@@ -3804,9 +3804,9 @@
}
},
"node_modules/aws-sdk": {
"version": "2.1580.0",
"resolved": "https://registry.npmjs.org/aws-sdk/-/aws-sdk-2.1580.0.tgz",
"integrity": "sha512-jR9EWyo1UY6QrYs+jhXCpqxBYXU6QYmqNejpsPgU5OzAWxUgalbXfQPAaw0A/DBxXU99qHO+j6RUYof82veiKw==",
"version": "2.1581.0",
"resolved": "https://registry.npmjs.org/aws-sdk/-/aws-sdk-2.1581.0.tgz",
"integrity": "sha512-lWvpj36dL0HC8i4l8N0NnV2ljedOrij1Ox0SjHwQTIvePes4lNm+khOLV0T7NDA1C6igsGozBO+8OcNGPDhfAw==",
"hasInstallScript": true,
"dependencies": {
"buffer": "4.9.2",
@@ -9082,9 +9082,9 @@
}
},
"node_modules/parse-server": {
"version": "6.5.4",
"resolved": "https://registry.npmjs.org/parse-server/-/parse-server-6.5.4.tgz",
"integrity": "sha512-RiTxJ2ay4YyTMQtbq/2jggJF6eYNstNLRa2TzHFRWl+/KJPj1KYpgUoEl0Oo5SouFr1YcTOYzUosdhgQb724wA==",
"version": "6.5.5",
"resolved": "https://registry.npmjs.org/parse-server/-/parse-server-6.5.5.tgz",
"integrity": "sha512-VQl/J0dc72VsTRkat5GkeZxS6FCEjvjee2yhNzMolDwjyMiEMkCqodJ2mUBnD+SfnG59NV9lSF/EiXsAnd8fZg==",
"hasInstallScript": true,
"dependencies": {
"@babel/eslint-parser": "7.21.8",
+2 -2
View File
@@ -18,7 +18,7 @@
"watch": "nodemon index.js"
},
"dependencies": {
"aws-sdk": "^2.1579.0",
"aws-sdk": "^2.1581.0",
"axios": "^1.6.8",
"cors": "^2.8.5",
"dotenv": "^16.4.5",
@@ -36,7 +36,7 @@
"nodemailer": "^6.9.12",
"parse": "^5.0.0",
"parse-dbtool": "^1.2.0",
"parse-server": "^6.4.0",
"parse-server": "^6.5.5",
"parse-server-api-mail-adapter": "^3.1.1",
"parse-server-fs-adapter": "^1.0.1",
"parse-server-s3-adapter": "^1.2.0",