refactor: improve code-splitting, reduce and balance files size

src/App.jsx

@@ -15,20 +15,16 @@ import "./App.css";
 import Root from "./components/Root";
 import Login from "./components/Login/Login";
 import ErrorPage from "./components/Errors/ErrorPage";
-import Feedback from "./components/Feedback/Feedback";
 import Canardman from "./components/Canardman/Canardman";
 import AppLoading from "./components/generic/Loading/AppLoading";
-import { DOMNotification } from "./components/generic/PopUps/Notification";
-import { getGradeValue, calcAverage, findCategory, calcCategoryAverage, calcGeneralAverage, formatSkills } from "./utils/gradesTools"
-import { areOccurenciesEqual, createUserLists, getCurrentSchoolYear, encrypt, decrypt } from "./utils/utils"
-
-
-import guestGrades from "./data/grades.json";
-
-// import Lab from "./components/Lab/Lab";
-const Lab = lazy(() => import("./components/Lab/Lab"))
-const Museum = lazy(() => import("./components/Museum/Museum"));
-const UnsubscribeEmails = lazy(() => import("./components/UnsubscribeEmails/UnsubscribeEmails"));
+import DOMNotification from "./components/generic/PopUps/Notification";
+import { getGradeValue, calcAverage, findCategory, calcCategoryAverage, calcGeneralAverage, formatSkills } from "./utils/gradesTools";
+import { areOccurenciesEqual, createUserLists, getCurrentSchoolYear, encrypt, decrypt } from "./utils/utils";
+
+// CODE-SPLITTING - DYNAMIC IMPORTS
+const Lab = lazy(() => import("./components/app/CoreApp").then((module) => { return { default: module.Lab }}));
+const Museum = lazy(() => import("./components/app/CoreApp").then((module) => { return { default: module.Museum }}));
+const UnsubscribeEmails = lazy(() => import("./components/app/CoreApp").then((module) => { return { default: module.UnsubscribeEmails }}));
 const Header = lazy(() => import("./components/app/CoreApp").then((module) => { return { default: module.Header } }));
 const Dashboard = lazy(() => import("./components/app/CoreApp").then((module) => { return { default: module.Dashboard } }));
 const Grades = lazy(() => import("./components/app/CoreApp").then((module) => { return { default: module.Grades } }));
@@ -37,6 +33,7 @@ const Timetable = lazy(() => import("./components/app/CoreApp").then((module) =>
 const Messaging = lazy(() => import("./components/app/CoreApp").then((module) => { return { default: module.Messaging } }));
 const Settings = lazy(() => import("./components/app/CoreApp").then((module) => { return { default: module.Settings } }));
 const Account = lazy(() => import("./components/app/CoreApp").then((module) => { return { default: module.Account } }));
+const Feedback = lazy(() => import("./components/app/CoreApp").then((module) => { return { default: module.Feedback }}));
 const LoginBottomSheet = lazy(() => import("./components/app/CoreApp").then((module) => { return { default: module.LoginBottomSheet } }));
 
 
@@ -1178,8 +1175,10 @@ export default function App() {
                     setGrades(usersGrades);
                 } else if (code === 49969) {
                     let usersGrades = [...grades];
-                    usersGrades[userId] = guestGrades.data;
-                    setGrades(usersGrades);
+                    import("./data/grades.json").then((module) => {
+                        usersGrades[userId] = module.data;
+                        setGrades(usersGrades);
+                    })
                 }
                 setTokenState((old) => (response?.token || old));
             })

src/components/Lab/Lab.jsx

@@ -14,7 +14,7 @@ import AppLoading from "../generic/Loading/AppLoading";
 import ShiningDiv from "../generic/CustomDivs/ShiningDiv";
 import Star from "../graphics/Star";
 import WalkingCanardman from "../graphics/WalkingCanardman"
-import { DOMNotification, useCreateNotification } from "../generic/PopUps/Notification"
+import { useCreateNotification } from "../generic/PopUps/Notification"
 import StoreCallToAction from "../generic/StoreCallToAction"
 import {
     BadgePlusInfo,

src/components/app/CoreApp.jsx

@@ -1,4 +1,7 @@
 
+import Lab from "../Lab/Lab";
+import Museum from "../Museum/Museum";
+import UnsubscribeEmails from "../UnsubscribeEmails/UnsubscribeEmails";
 import Header from "./Header/Header";
 import Dashboard from "./Dashboard/Dashboard";
 import Grades from "./Grades/Grades";
@@ -7,9 +10,13 @@ import Timetable from "./Timetable/Timetable";
 import Messaging from "./Messaging/Messaging";
 import Settings from "./Settings/Settings";
 import Account from "./Account/Account";
+import Feedback from "../Feedback/Feedback";
 import LoginBottomSheet from "../Login/LoginBottomSheet";
 
 
+export { Lab };
+export { Museum };
+export { UnsubscribeEmails };
 export { Header };
 export { Dashboard };
 export { Grades };
@@ -18,6 +25,7 @@ export { Timetable };
 export { Messaging };
 export { Settings };
 export { Account };
+export { Feedback };
 export { LoginBottomSheet };
 
 // export default { Header, Dashboard, Grades, Homeworks, Timetable, Messaging }

src/components/generic/PopUps/Notification.jsx

@@ -12,7 +12,7 @@ export function useCreateNotification() {
     return addNotification
 }
 
-export function DOMNotification({ children }) {
+export default function DOMNotification({ children }) {
     const [notificationList, setNotificationList] = useState([])
 
     const currentNotificationId = useRef(0);