Removed node-sass

Replaced react-loadable with React.lazy

Author: BasicPrimitives

client/package.json

@@ -23,7 +23,6 @@
     "final-form": "^4.20.1",
     "lodash": "^4.17.20",
     "markdown-react-js": "^1.0.2",
-    "node-sass": "^5.0.0",
     "pdfkit-nodejs-webpack": "^0.0.2",
     "prop-types": "^15.7.2",
     "react": "^17.0.1",
@@ -35,7 +34,6 @@
     "react-ga": "^3.2.0",
     "react-helmet": "^6.1.0",
     "react-live": "^2.2.3",
-    "react-loadable": "^5.5.0",
     "react-redux": "^7.2.2",
     "react-scripts": "4.0.0",
     "react-sortable-hoc": "^1.11.0",

client/src/components/PdfViewDialog/FamPdfViewDialogLoadable.js

@@ -1,11 +1,12 @@
-import React from "react"
-import Loadable from "react-loadable"
+import React, { Suspense } from "react"
+const FamPdfViewDialog = React.lazy(() => import('./FamPdfViewDialog'));
 
-const loadable = Loadable({
-    loader: () => import("./FamPdfViewDialog"),
-    loading() {
-        return <div>Loading...</div>
-    }
-  })
-
-export default loadable;
+export default function Loadable(props) {
+  return (
+    <div>
+      <Suspense fallback={<div>Loading...</div>}>
+        <FamPdfViewDialog {...props} />
+      </Suspense>
+    </div>
+  );
+}

client/src/components/PdfViewDialog/OrgPdfViewDialogLoadable.js

@@ -1,11 +1,12 @@
-import React from "react"
-import Loadable from "react-loadable"
+import React, { Suspense } from "react"
+const OrgPdfViewDialog = React.lazy(() => import('./OrgPdfViewDialog'));
 
-const loadable = Loadable({
-    loader: () => import("./OrgPdfViewDialog"),
-    loading() {
-        return <div>Loading...</div>
-    }
-  })
-
-export default loadable;
+export default function Loadable(props) {
+  return (
+    <div>
+      <Suspense fallback={<div>Loading...</div>}>
+        <OrgPdfViewDialog {...props} />
+      </Suspense>
+    </div>
+  );
+}

client/src/components/PdfViewDialog/PdfViewDialog.js

@@ -72,7 +72,7 @@ function PdfViewDialog(props) {
   }, []);
 
   return (
-    isVisible && (
+    isVisible ? (
       <Dialog fullScreen open={isVisible} onClose={onClose}>
         <AppBar style={{position: 'relative'}}>
           <Toolbar>
@@ -93,8 +93,8 @@ function PdfViewDialog(props) {
           <Button variant="contained" color="primary" onClick={onClose}>Close</Button>
         </DialogActions>
       </Dialog>
-    )
-  );
+    ) : <></>
+  ) 
 }
 
 export default PdfViewDialog;

client/src/containers/CrossTeamGroup/Loadable.js

@@ -1,11 +1,12 @@
-import React from "react"
-import Loadable from "react-loadable"
+import React, { Suspense } from "react"
+const CrossTeamGroup = React.lazy(() => import('./CrossTeamGroup'));
 
-const loadable = Loadable({
-    loader: () => import("./CrossTeamGroup"),
-    loading() {
-        return <div>Loading...</div>
-    }
-  })
-
-export default loadable;
+export default function Loadable() {
+  return (
+    <div>
+      <Suspense fallback={<div>Loading...</div>}>
+        <CrossTeamGroup />
+      </Suspense>
+    </div>
+  );
+}

client/src/containers/Dependencies/Loadable.js

@@ -1,11 +1,12 @@
-import React from "react"
-import Loadable from "react-loadable"
+import React, { Suspense } from "react"
+const Dependencies = React.lazy(() => import('./Dependencies'));
 
-const loadable = Loadable({
-    loader: () => import("./Dependencies"),
-    loading() {
-        return <div>Loading...</div>
-    }
-  })
-
-export default loadable;
+export default function Loadable() {
+  return (
+    <div>
+      <Suspense fallback={<div>Loading...</div>}>
+        <Dependencies />
+      </Suspense>
+    </div>
+  );
+}

client/src/containers/DynamicLoading/Loadable.js

@@ -1,11 +1,12 @@
-import React from "react"
-import Loadable from "react-loadable"
+import React, { Suspense } from "react"
+const DynamicLoading = React.lazy(() => import('./DynamicLoading'));
 
-const loadable = Loadable({
-    loader: () => import("./DynamicLoading"),
-    loading() {
-        return <div>Loading...</div>
-    }
-  })
-
-export default loadable;
+export default function Loadable() {
+  return (
+    <div>
+      <Suspense fallback={<div>Loading...</div>}>
+        <DynamicLoading />
+      </Suspense>
+    </div>
+  );
+}

client/src/containers/FamilyChartItemsOrdering/Loadable.js

@@ -1,11 +1,12 @@
-import React from "react"
-import Loadable from "react-loadable"
+import React, { Suspense } from "react"
+const FamilyChartItemsOrdering = React.lazy(() => import('./FamilyChartItemsOrdering'));
 
-const loadable = Loadable({
-    loader: () => import("./FamilyChartItemsOrdering"),
-    loading() {
-        return <div>Loading...</div>
-    }
-  })
-
-export default loadable;
+export default function Loadable() {
+  return (
+    <div>
+      <Suspense fallback={<div>Loading...</div>}>
+        <FamilyChartItemsOrdering />
+      </Suspense>
+    </div>
+  );
+}

client/src/containers/FamilyChartWithAnnotations/Loadable.js

@@ -1,11 +1,12 @@
-import React from "react"
-import Loadable from "react-loadable"
+import React, { Suspense } from "react"
+const FamilyChartWithAnnotations = React.lazy(() => import('./FamilyChartWithAnnotations'));
 
-const loadable = Loadable({
-    loader: () => import("./FamilyChartWithAnnotations"),
-    loading() {
-        return <div>Loading...</div>
-    }
-  })
-
-export default loadable;
+export default function Loadable() {
+  return (
+    <div>
+      <Suspense fallback={<div>Loading...</div>}>
+        <FamilyChartWithAnnotations />
+      </Suspense>
+    </div>
+  );
+}

client/src/containers/FinancialOwnership/Loadable.js

@@ -1,11 +1,12 @@
-import React from "react"
-import Loadable from "react-loadable"
+import React, { Suspense } from "react"
+const FinancialOwnership = React.lazy(() => import('./FinancialOwnership'));
 
-const loadable = Loadable({
-    loader: () => import("./FinancialOwnership"),
-    loading() {
-        return <div>Loading...</div>
-    }
-  })
-
-export default loadable;
+export default function Loadable() {
+  return (
+    <div>
+      <Suspense fallback={<div>Loading...</div>}>
+        <FinancialOwnership />
+      </Suspense>
+    </div>
+  );
+}